$('#EmployeeGrid').flexigrid({
//表格寬度(注意在IE不能使用100%之類字串)
width:$(window).width()-2,
//表格高度(注意在IE不能使用100%之類字串)
height:480,
//資料列雙色交差
striped:true,
//欄位雙色交差
novstripe:false,
//最小寬度
minwidth:400,
//最小高度
minheight:200,
//是否可調整視窗大小
resizable:true,
//遠端伺服的網址
url:'server/employee.php',
//資料送出模式
method:'POST',
//回傳的資料類型
dataType:'xml',
//連結資料失敗時的訊息
errormsg:'連線資料庫失敗',
//啟用分頁器
usepager:true,
//不重疊
nowrap:true,
//預設的頁數
page:1,//当前页,但是该参数在初始化有效,在后期需要跳页时,需通过修改 newp 这个参数
//總頁數
total:1,//totalpages
//使用分頁大小選擇器
useRp:true,
//預設的分頁大小(筆數)
rp:15,//resultsperpage
//可選用的分頁大小
rpOptions:[10,15,20,25,40],
//標題
title:false,
//分頁器的顯示資訊
pagestat:'檢視{from}到{to},全部共有{total}筆資料',
//讀取時的訊息
procmsg:'資料讀取中,請稍後…',
//搜尋時送出附加自訂的query
query:'',
//搜尋自訂附加的欄位,請搜尋"//addsearchbutton"參考原始碼那段
qtype:'',
//空資料時的訊息
nomsg:'找不到符合絛件的資料',
//隱藏欄位數不得少於?
minColToggle:1,
//顯示或關閉隱藏欄位的開啟器
showToggleBtn:true,
//預設排序的欄位
sortname:'basic_name',
//預設排序的方式
sortorder:'asc',
//送出時隱藏
hideOnSubmit:false,
//限定單選
singleSelect:true,
//不得調整視窗寬度
nohresize:true
//自動讀取資料
autoload:true,
//區塊透明
blockOpacity:0.5,
//顯示隱藏欄位時呼叫的自訂函式
onToggleCol:false,
//改變排序方式時呼叫的自訂函式
onChangeSort:false,
//執行成功後呼叫的自訂函式
onSuccess:false,
//資料送出時呼叫的自訂函式
onSubmit:false,
//錯誤時呼叫的自訂函式
onError:false,
//當分頁大小選擇器被選擇時呼叫自訂函式
onRpChange:false,
//是否顯示右上角縮小視窗的按鈕
showTableToggleBtn:true,
//定義欄位資訊(以下為範例)
colModel:[
//第一個欄位
{display:'身份證字號',
name:'basic_unicode',
width:75,
sortable:true,
align:'center',
hide:false},
//第二個欄位
{display:'姓名',
name:'basic_unicode',
width:75,
sortable:true,
align:'center',
hide:false}
],
//自訂的參數(以下為範例)
params:[
//參數1(陣列型)
{name:'viewFields',value:['id','basic_unicode','basic_name']},
//參數2(單一型)
{name:'action',value:'view'}
/*
附註:另外以下為預設一定會送出去的物件參數,注意不要取同名
var param={
page:p.newp,
rp:p.rp,
sortname:p.sortname,
sortorder:p.sortorder,
query:p.query,
qtype:p.qtype
};
*/
],
//定義功能欄的按鈕資訊(以下為範例)
buttons:[
{name:'新增',bclass:'add',onpress:null},
{name:'刪除',bclass:'delete',onpress:null},
{separator:true}
],
//定義搜尋欄位資訊(以下為範例)
searchitems:[
{display:'身份證字號',name:'basic_unicode'},
{display:'聯絡手機',name:'contact_mobile'},
{display:'姓名',name:'basic_name',isdefault:true}
]
});
分享到:
相关推荐
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
在本示例中,我们探讨的是如何利用LINQ to SQL、Flexigrid for JQuery和Json技术来构建一个ASP.NET MVC模式的应用程序。首先,让我们逐一深入理解这些技术及其在项目中的作用。 **LINQ to SQL**(Language ...
《jQuery Flexigrid详解及其应用》 jQuery Flexigrid是一款基于jQuery库的表格插件,专为网页数据展示提供强大的功能。它具有高度可定制性,支持分页、排序、搜索以及自定义列宽,使得网页中的数据管理更加便捷和...
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
3. **初始化设置**:通过JavaScript代码配置Flexigrid的各项参数,如表格列定义、分页设置、搜索选项等。 4. **数据绑定**:调用Flexigrid的load方法,将后端返回的数据绑定到表格中。 5. **事件监听**:可以绑定...
Flexigrid是一款基于jQuery的轻量级数据网格插件,它为网页开发提供了一种强大的方式来展示和操作表格数据。这款插件以其灵活性、可定制性和丰富的功能而受到开发者的青睐。在“flexigrid,jquery的一个grid,基本...
**jQuery Flexigrid 前台排序实现详解** 在Web开发中,数据展示是一个重要的环节,而表格作为数据展示的常见形式,其排序功能尤为重要。jQuery Flexigrid是一款功能强大的表格插件,它提供了丰富的自定义选项和操作...
Flexigrid是一款基于jQuery的强大的表格插件,它允许开发者将数据以美观、可操作的表格形式呈现出来,类似于知名的JavaScript框架ExtJS的表格组件。这个插件的主要优点在于其灵活性和可定制性,能够满足各种复杂的...
- **Ajax请求**:FlexiGrid使用jQuery的Ajax方法向服务器发送GET或POST请求,请求参数包括当前的排序条件、分页信息等。 - **服务器响应**:服务器接收到请求后,解析参数,执行相应的数据库操作,然后将结果集以...
Flexigrid是一款基于jQuery的轻量级数据网格插件,专为实现强大的表格展示和操作功能而设计。在Web开发中,特别是在构建数据密集型应用时,它提供了一种高效且用户友好的方式来显示、排序、筛选和操作数据。这款插件...
**jQuery仿Ext表格Flexigrid详解** Flexigrid是一款基于jQuery的开源表格插件,它在功能和用户体验上模仿了Ext JS的Grid组件。这款插件以其轻量级、高效和丰富的特性,深受Web开发者喜爱,尤其适用于需要展示大量...
Flexigrid-Web2.0 jQuery表格插件 Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性,如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。 一个中文实例教程: ...
总之,Flexigrid for ASP.NET是一个强大且灵活的前端数据网格解决方案,它通过多选、客户端排序和自定义功能,极大地提升了数据展示和操作的用户体验。开发者可以充分利用这些特性,以提高项目的交互性、效率和用户...
- 使用jQuery选择器初始化FlexiGrid,并设置基本参数: ```javascript $(document).ready(function() { $("#flex1").flexigrid({ url: '../ReleaseInfoServlet?hidden=manage', dataType: 'json', colModel: ...
$("#flex1").flexigrid({ url: 'post2.php', dataType: 'json', colModel : [ {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'}, {display: 'Name', name : 'name', width : 180...
Flexigrid是一款基于jQuery的表格插件,它提供了丰富的功能,如数据分页、排序、搜索和自定义列显示,适用于构建数据密集型Web应用。在这个"jquery插件之flexigrid学习实例"中,我们将深入探讨如何在Struts2框架下...
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。这个例子对...
Flexigrid是一款基于jQuery的表格插件,它提供了丰富的功能,如数据分页、排序、搜索和自定义列宽等,极大地增强了网页中表格的展示效果和交互性。在"jquery插件之flexigrid学习实例-jar包"中,我们主要关注的是如何...
Flexigrid是一款强大的JavaScript表格插件,主要用于在Web应用程序中展示数据,提供分页、排序、筛选等功能。在Asp.Net MVC框架下,它能够帮助开发者构建用户界面,以更直观、灵活的方式呈现数据。本篇文章将深入...
FlexiGrid是一款基于jQuery的表格插件,它提供了丰富的功能,包括数据分页、排序、过滤、编辑等,使得在Web应用中展示和操作大量数据变得更加便捷。在本篇文章中,我们将深入探讨FlexiGrid的使用方法,以及如何将其...