JQuery Easy Ui dataGrid 数据表格
来源:互联网 发布:开淘宝网店还考试吗 编辑:程序博客网 时间:2024/06/08 13:49
数据表格 - DataGrid
内容
- 概况
- 使用方法
- 数据表格属性
- 数据列属性
- 编辑
- 数据视图
- 事件
- 方法
继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值。.
数据表格显示的数据以表格的形式,并提供了丰富的选择,排序,分组和编辑数据的支持。这个数据表格被设计以缩短开发时间,并要求开发商没有具体的知识。它是轻量级的,功能丰富的。单元格合并,多列标题,冻结列和页脚是其功能只是一小部分。
依赖组件(Dependencies)
- 布局 - panel
- 缩放 - resizable
- 链接按钮 - linkbutton
- 分页 - pagination
使用方法(Usage Example)
从现有的表单元素创建数据表格,定义在html中的行,列和数据。
- <table class="easyui-datagrid">
- <thead>
- <tr>
- <th data-options="field:'code'">Code</th>
- <th data-options="field:'name'">Name</th>
- <th data-options="field:'price'">Price</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>001</td><td>name1</td><td>2323</td>
- </tr>
- <tr>
- <td>002</td><td>name2</td><td>4612</td>
- </tr>
- </tbody>
- </table>
通过<TABLE>标记创建的DataGrid。嵌套的<TH>标签定义的列的表。
- <table class="easyui-datagrid" style="width:400px;height:250px"
- data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
- <thead>
- <tr>
- <th data-options="field:'code',width:100">Code</th>
- <th data-options="field:'name',width:100">Name</th>
- <th data-options="field:'price',width:100,align:'right'">Price</th>
- </tr>
- </thead>
- </table>
使用JavaScript创建数据表格。
- <table id="dg"></table>
- $('#dg').datagrid({
- url:'datagrid_data.json',
- columns:[[
- {field:'code',title:'Code',width:100},
- {field:'name',title:'Name',width:100},
- {field:'price',title:'Price',width:100,align:'right'}
- ]]
- });
查询数据填充数据表格。
- $('#dg').datagrid('load', {
- name: 'easyui',
- address: 'ho'
- });
数据更改与服务器交互,刷新当前数据。
- $('#dg').datagrid('reload'); // reload the current page data
数据表格属性(DataGrid Properties)
属性继承控制面板,以下是数据表格独有的属性。
1)数组,每个工具选项和链接按钮相同。
2)选择显示的工具栏。
在一个<div>的标签定义工具栏:
$('#dg').datagrid({toolbar: '#tb'});<div id="tb"><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a></div>
通过数组定义工具栏:
$('#dg').datagrid({toolbar: [{iconCls: 'icon-edit',handler: function(){alert('edit')}},'-',{iconCls: 'icon-help',handler: function(){alert('help')}}]});nullstripedboolean设置为true将交替显示行背景。falsemethodstring请求远程数据的方法类型。postnowrapboolean设置为true,当数据长度超出列宽时将会自动截取。trueidFieldstring表明该列是一个唯一列。nullurlstring一个用以从远程站点请求数据的超链接地址。nullloadMsgstring当从远程站点载入数据时,显示的一条快捷信息。Processing, please wait …paginationboolean设置true将在数据表格底部显示分页工具栏。falserownumbersboolean设置为true将显示行数。falsesingleSelectboolean设置为true将只允许选择一行。falsecheckOnSelectboolean如果为true,该复选框被选中/取消选中,当用户点击某一行上。如果为false,该复选框仅检查/取消选中,当用户点击完全的复选框。
此属性是1.3版本。trueselectOnCheckboolean如果设置为true,单击一个复选框,将始终选择行。如果为false,不会选择行选中该复选框。
此属性是1.3版本。truepagePositionstring 定义的分页栏的位置。可用的值有 'top','bottom','both'。
此属性是可自1.3版本。bottompageNumbernumber当设置分页属性时,初始化分页码。1pageSizenumber当设置分页属性时,初始化每页记录数。10pageListarray当设置分页属性时,初始化每页记录数列表。[10,20,30,40,50]queryParamsobject当请求远程数据时,发送的额外参数。
示例:
$('#dg').datagrid({queryParams: {name: 'easyui',subject: 'datagrid'}});{}sortNamestring当数据表格初始化时以哪一列来排序。nullsortOrderstring定义排序顺序,可以是'asc'或者'desc'(正序或者倒序)。ascremoteSortboolean定义是否通过远程服务器对数据排序。trueshowFooterboolean定义是否显示行底(如果是做统计表格,这里可以显示总计等)。falserowStylerfunction返回样式,如:'background:red',function有2个参数:
index:行索引,从0开始.
row:对应于该行记录的对象。
示例:
$('#dg').datagrid({rowStyler: function(index,row){if (row.listprice>80){return 'background-color:#6293BB;color:#fff;';}}});loaderfunction定义如何从远程服务器加载数据。返回false可以取消该操作。这个函数接受以下参数:
param: 参数对象传递到远程服务器。
success(data): 回调函数将被调用成功检索的数据。
error():回调函数将被调用失败时检索数据。json loaderloadFilterfunction返回过滤的数据显示。该函数需要一个参数'data',表示原始数据。您可以更改源数据的标准数据格式。此函数必须返回标准数据对象中包含的“total”和“rows”的属性。
示例:
// removing 'd' object from asp.net web service json output$('#dg').datagrid({loadFilter: function(data){if (data.d){return data.d;} else {return data;}}});editorsobject定义当编辑一行时的编辑模式。predefined editorsviewobject定义数据表格的视图。default view
列属性(Column Properties)
数据表格的列是一个对象数组,即这个对象中的元素也是一个数组(js中数组是对象)。 对象数组中的每一个元素都是可配置的对象,每个可配置对象定义一个列。
示例:
- columns:[[
- {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
- {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
- {title:'Item Details',colspan:4}
- ],[
- {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
- {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
- {field:'attr1',title:'Attribute',width:100},
- {field:'status',title:'Status',width:60}
- ]]
value:字段的值。
rowData:行数据。
rowIndex:行索引。
示例:
$('#dg').datagrid({columns:[[{field:'userId',title:'User', width:80,formatter: function(value,row,index){if (row.user){return row.user.name;} else {return value;}}}]]});undefinedstylerfunction单元格样式函数,返回样式字符串装饰表格如'background:red',function有3个参数:
value:字段值。
rowData:行数据。
rowIndex:行索引。
示例:
$('#dg').datagrid({columns:[[{field:'listprice',title:'List Price', width:80, align:'right',styler: function(value,row,index){if (value < 20){return 'background-color:#ffee00;color:red;';}}}]]});undefinedsorterfunctionT自定义字段排序函数,有2个参数:
a:该列的第一个值。
b:该列的第二个值。
示例:
$('#dg').datagrid({remoteSort: false,columns: [[{field:'date',title:'Date',width:80,sortable:true,align:'center', sorter:function(a,b){ a = a.split('/'); b = b.split('/'); if (a[2] == b[2]){ if (a[0] == b[0]){ return (a[1]>b[1]?1:-1); } else { return (a[0]>b[0]?1:-1); } } else { return (a[2]>b[2]?1:-1); } } }]]});undefinededitorstring,object表明编辑类型。如果属性是字符串类型表示编辑类型,如果是对象则包含2个参数:
type:字符串,编辑类型,可选值:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。
options:对象,对象于编辑类型的编辑器属性。undefined
编辑器(Editor)
使用$.fn.datagrid.defaults.editors重载默认值。
每个编辑器都有以下方法:
如下代码将定义一个文本编辑器:
- $.extend($.fn.datagrid.defaults.editors, {
- text: {
- init: function(container, options){
- var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
- return input;
- },
- getValue: function(target){
- return $(target).val();
- },
- setValue: function(target, value){
- $(target).val(value);
- },
- resize: function(target, width){
- var input = $(target);
- if ($.boxModel == true){
- input.width(width - (input.outerWidth() - input.width()));
- } else {
- input.width(width);
- }
- }
- }
- });
数据表格视图(DataGrid View)
使用$.fn.datagrid.defaults.view重载默认值。
视图是一个告诉数据表格如何呈现行记录的对象,对象必须定义以下方法:
target: DOM对象,数据网格对象。
container: 行记录容器。
frozen: 是否呈现固定容器。renderFootertarget, container, frozen这是一个可选函数用以展现行底。renderRowtarget, fields, frozen, rowIndex, rowData这是一个可选函数,它可以被render函数调用。refreshRowtarget, rowIndex定义如何刷新指定的行。onBeforeRendertarget, rows在视图被呈现之前触发。onAfterRendertarget在视图被程序之后触发。
事件(Events)
事件继承控制面板,以下是数据表格独有的属性。
rowIndex:被点击的行索引,从0开始。
rowData:对应于被点击的行的记录。onDblClickRowrowIndex, rowData当用户双击一行时触发,参数如下:
rowIndex:被点击的行索引,从0开始。
rowData:对应于被点击的行的记录。onClickCellrowIndex, field, value当用户点击单元格时触发。onDblClickCellrowIndex, field, value当用户双击单元格时触发。
示例:
// when double click a cell, begin editing and make the editor get focus$('#dg').datagrid({onDblClickCell: function(index,field,value){$(this).datagrid('beginEdit', index);var ed = $(this).datagrid('getEditor', {index:index,field:field});$(ed.target).focus();}});onSortColumnsort, order当用户对列排序时触发,参数如下:
sort:排序字段名称。
order:排序顺序。onResizeColumnfield, width当用户调整列宽时触发。onSelectrowIndex, rowData当用户选择一行是触发,参数如下:
rowIndex:被选择的行索引,从0开始。
rowData:对应于被选择行的记录。onUnselectrowIndex, rowData当用户取消选择一行时触发,参数如下:
rowIndex:被取消选择的行索引,从0开始。
rowData:对应于被取消选择行的记录。onSelectAllrows当用户选择所有行时触发。onUnselectAllrows当用户取消选择所有行时触发。onCheckrowIndex,rowData当用户选中行时触发,参数包含:
rowIndex:选中行的索引,从0开始
rowData:选中的行对应的记录
此属性是1.3版本。onUncheckrowIndex,rowData当用户取消选中行时触发,参数包含:
rowIndex:取消选中行的索引,从0开始
rowData:未经检查的行对应的记录
此属性是1.3版本。onCheckAllrows当用户检查所有行时触发。此属性是1.3版本。onUncheckAllrows用户取消所有行时触发。此属性是1.3版本。onBeforeEditrowIndex, rowData当用户开始编辑一行时触发,参数如下:
rowIndex:正在编辑的行索引,从0开始。
rowData:对应于正在编辑的行的记录。onAfterEditrowIndex, rowData, changes当用户编辑完成时触发,参数如下:
rowIndex:正在编辑的行索引,从0开始。
rowData:对应于正在编辑的行的记录。
changes:被改变的字段内容,对应方式为字段:值。onCancelEditrowIndex, rowData当用户取消编辑行时触发,参数如下:
rowIndex:正在编辑的行索引,从0开始。
rowData:对应于正在编辑的行的记录。onHeaderContextMenue, field当数据表格的列标题被鼠标右键单击时触发。onRowContextMenue, rowIndex, rowData当一行被鼠标右键单击时触发。
方法(Methods)
示例:
var opts = $('#dg').datagrid('getColumnFields');// get unfrozen columnsvar opts = $('#dg').datagrid('getColumnFields', true); // get frozen columnsgetColumnOptionfield返回特定的列属性。resizeparam缩放和布局。loadparam载入并显示第一页的记录,如果传递了'param'参数,它将会覆盖查询参数属性的值。通过传递一些参数,通常做一个查询,这个方法可以被称为从服务器加载新数据。
$('#dg').datagrid('load',{code: '01',name: 'name01'});reloadparam重载记录,跟'load'方法一样但是重载的是当前页的记录而非第一页。reloadFooterfooter重载行底记录。 示例:
// update footer row values and then refreshvar rows = $('#dg').datagrid('getFooterRows');rows[0]['name'] = 'new name';rows[0]['salary'] = 60000;$('#dg').datagrid('reloadFooter');// update footer rows with new data$('#dg').datagrid('reloadFooter',[{name: 'name1', salary: 60000},{name: 'name2', salary: 65000}]);loadingnone显示载入状态。loadednone隐藏载入状态。fitColumnsnone让列宽自动适应数据表格的宽度。fixColumnSizefield固定列尺寸。如果“field' 参数未指定,将所有列的大小固定。
示例:
$('#dg').datagrid('fixColumnSize', 'name'); // fix the 'name' column size$('#dg').datagrid('fixColumnSize'); // fix all columns sizefixRowHeightindex固定特定列的高度。如果“index' 参数未指定,将所有列的高度固定。autoSizeColumnfield自动调整列宽,以适应内容。此方法是1.3版本特有的。loadDatadata载入本地数据,旧记录将被移除。getDatanone返回已载入数据。getRowsnone返回当前页的记录。getFooterRowsnone返回行底记录。getRowIndexrow返回指定行的索引,row参数可以是行记录或者是一个id字段的值。getCheckednone返回所有行的复选框已被选中。此方法是1.3版本特有的。getSelectednone返回第一个被选择的行记录或null。getSelectionsnone返回所有被选择的行,当没有记录被选择时,将返回一个空数组。clearSelectionsnone取消所有的已选择项。selectAllnone选择所有页面的行。unselectAllnone取消选择所有页面的行。selectRowindex选择一行,行索引从0开始。selectRecordidValue通过传递id参数来选择一行。unselectRowindex取消选择一行。checkAllnone检查所有页面的行。此方法是1.3版本特有的。uncheckAllnone取消检查所有当前页面的行。此方法是1.3版本特有的。checkRowindex检查行,行索引从0开始。此方法是1.3版本特有的。uncheckRowindex取消检查行,行索引从0开始。此方法是1.3版本特有的。beginEditindex开始编辑一行。endEditindex结束编辑。cancelEditindex取消编辑。getEditorsindex获取指定行的编辑器,每个编辑器有如下属性:
actions:编辑器可以做的行为。
target:目标编辑器jQuery对象。
field:字段名。
type:编辑器类型。getEditoroptions获取特定的编辑器,options参数有2个属性:
index:行索引。
field:字段名。
示例:
// get the datebox editor and change its valuevar ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});$(ed.target).datebox('setValue', '5/4/2012');refreshRowindex刷新一行。validateRowindex校验指定的行,如果有效返回true。updateRowparam更新指定的行,param参数包含如下属性:
index:要更新的行索引。
row:新的行数据。
示例:
$('#dg').datagrid('updateRow',{index: 2,row: {name: 'new name',note: 'new note message'}});appendRowrow添加一行。 新的行会被添加到最后一个位置:
$('#dg').datagrid('appendRow',{name: 'new name',age: 30,note: 'some messages'});insertRowparam
插入一个新行,param参数包含如下属性:
index:要插入的行索引,如果没有定义则在最后面添加一个新行。
row:行数据。
index:要插入的行索引,如果没有定义则在最后面添加一个新行。
row:行数据。
示例:
// insert a new row at second row position$('#dg').datagrid('insertRow',{index: 1,// index start with 0row: {name: 'new name',age: 30,note: 'some messages'}});deleteRowindex删除一行。getChangestype获取从最后一次提交开始的被修改的所有行,type参数表明修改的类型,可选值:inserted,deleted,updated等 。当没有传递type参数时,返回所有被修改的行。acceptChangesnone提交所有修改的数据,提交后的数据将不能再修改或者回滚。rejectChangesnone回滚自创建以来或自上次调用AcceptChanges,所有的变化数据。mergeCellsoptions合并单元格,options参数包含如下属性:
index:行索引。
field:字段名。
rowspan:整合单元格要跨的行数。
colspan:整合单元格要跨的列数。showColumnfield显示特定的列。hideColumnfield隐藏特定的列。
1 ///////////////////////////////////////////// 2 //初始化数据 3 function initGrid() 4 { 5 $('#grid').datagrid({ 6 width:'100%', 7 height:'auto', 8 nowrap: true, 9 striped: true, 10 fitColumns:false, 11 url:'${contextPath}/cardGift/cardGift.do?method=getCardGiftList&activeId=${information.cardGiftActive.activeId}', 12 queryParams:queryParam, 13 remoteSort:false, 14 //Grid对应的主键列 15 idField:'', 16 singleSelect:true, 17 columns:[[ 18 {field:'serial',title:'',width:15,checkbox:true}, 19 {field:'activeName',title:'活动名称',width:50,sortable:true}, 20 {field:'giftGoodId',title:'赠品商品编码',width:80}, 21 {field:'goodsName',title:'商品名称',width:120}, 22 {field:'giftCodeTotal',title:'赠品码生成数量',width:100}, 23 {field:'genCodeNumber',title:'已生成赠品码数量',width:100}, 24 {field:'startTime',title:'赠品发放起始时间',width:125}, 25 {field:'endTime',title:'赠品发放结束时间',width:125}, 26 {field:'memo',title:'备注',width:120} 27 ]], 28 pagination:true, 29 rownumbers:true, 30 toolbar:[ 31 '-',{ 32 id:'btnClearSelections', 33 text:'修改活动商品', 34 iconCls:'icon-edit', 35 handler:function(){ 36 editData(); 37 } 38 },'-',{ 39 id:'btnDel', 40 text:'删除活动商品', 41 iconCls:'icon-no', 42 handler:function(){ 43 deleteData(); 44 } 45 }, 46 '-',{ 47 id:'btnClearSelections', 48 text:'清除选择', 49 iconCls:'icon-cut', 50 handler:function(){ 51 $('#grid').datagrid('clearSelections'); 52 //设置选中值 53 document.addForm.reset(); 54 $('#giftCodeTotal').val("0"); 55 $('#memoData').html(""); 56 $('#submitBtn').html("确认提交"); 57 $('#submitBtn').attr('onclick',"addSubmit('insert');"); 58 } 59 }], 60 onLoadError:function(){ 61 XW_dialog.alert('','加载数据失败!'); 62 } 63 64 }); 65 66 //设置分页控件 67 var p = $('#grid').datagrid('getPager'); 68 $(p).pagination(PAGE_TEMPLATE); 69 } 70 71 72 function editData(){ 73 var row = $('#grid').datagrid("getSelections"); 74 if($(row).length < 1 || $(row).length > 1) 75 { 76 XW_dialog.alert('',"请选择要查看的记录,只能选取单行!"); 77 return ; 78 } 79 //设置默认选中 80 $('#goodsSelect').combogrid('grid').datagrid('selectRecord',row[0].giftGoodId); 81 $('#goodsSelect').hide(); 82 //设置选中值 83 $('#giftCodeTotal').val(row[0].giftCodeTotal); 84 $('#memoData').html(row[0].memo); 85 $('#submitBtn').html("更新"); 86 $('#submitBtn').attr('onclick',"addSubmit('update');"); 87 $('#resetBtn').hide(); 88 89 } 90 91 92 function deleteData(){ 93 var data = $('#grid').datagrid("getSelections"); 94 //删除 95 var delurl = "${contextPath}/cardGift/cardGift.do?method=deleteCardGift&activeId="+data[0].activeId+"&giftGoodId="+data[0].giftGoodId; 96 //发送删除请求 97 $.ajax({ 98 type: "POST", 99 dataType:'json',100 url: delurl,101 success: function(msg){102 if(msg.success)103 {104 //保存回调函数使用的数据105 XW_dialog.addData('callbackData',msg.map);106 //删除成功107 XW_dialog.tips(msg.errorMsg, 3);108 deleteCallBack();109 }110 else111 {112 XW_dialog.alert('',msg.errorMsg);113 }114 }115 });116 } 117 118 119 //删除记录回调函数,默认调用刷新记录方法,120 function deleteCallBack(){121 reloadGrid("grid");122 }123
0 0
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格详解
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格 此文章解决easy ui 足矣
- 修改oracle数据库用户密码
- Agile Use Cases in Four Steps
- 利用JQuery直接调用asp.net后台方法
- jQuery的ajax使用
- leetcode 146: Reorder List
- JQuery Easy Ui dataGrid 数据表格
- 开源html5_kiwijs_helloworld
- php文件缓存数据
- leetcode 147: Linked List Cycle II
- jqGrid一些使用
- Search in Rotated Sorted Array
- oracle 错误 1067:进程意外终止
- php cache类代码(php数据缓存类)
- .net MD5加密函数