接着上篇combobox，表格控件无处不在，easyui也不例外，提供及其丰富的展现形式，这里我仅对最常用的几种方式记录下，以便在以后使用的时候可以节省点时间找资料。先来张图：
上面的图片就是我们最常用的几种情况，当然自己写样式和JS来做完全可以实现，控制起来也更自如。我是懒人，能懒则懒，也就顺带的看了下datagrid的使用方式：
分页的情况：
<table id="dg2" class="easyui-datagrid" title="分页" style="width: 500px; height: 250px"> <thead> <tr> <th data-options="field:‘ck‘,checkbox:true"> </th> <th data-options="field:‘CurrPrice‘,width:90,align:‘right‘,formatter:formatPrice"> 当前价 </th> <th data-options="field:‘Mileage‘,width:90,align:‘right‘"> 里程 </th> <th data-options="field:‘StartPrice‘,width:240"> 起拍价 </th> <th data-options="field:‘CityName‘,width:120"> 城市 </th> <th data-options="field:‘CarInfo‘,width:100"> 车辆信息 </th> </tr> </thead> </table> <a href="javascript:void(0)" onclick="ShowValues2()">获取选中行</a>
对应的JS：
$(‘#dg2‘).datagrid({ rownumbers: false , singleSelect: true , border: true , pagination: true , collapsible: false , remoteSort: false , onLoadSuccess: function (row) { var rowData = row.rows; $.each(rowData, function (idx, val) { if (val.CarInfo == "雪佛兰00003") { $("#dg2").datagrid("selectRow", idx); //如果数据行为已选中则选中改行 } }); } } ); $(‘#dg2‘).datagrid(‘getPager‘).pagination({ onSelectPage: function (pageNumber, pageSize) { getData(pageNumber, 10); } });
function getData(pageNumber, pageSize) { var url = "/Common/GetData2"; var data = { pageIndex: pageNumber };//仅作展示，参数可以自己来组织 $.post(url, data, function (response) { $(‘#dg2‘).datagrid(‘loadData‘, response); var p = $(‘#dg2‘).datagrid(‘getPager‘); $(p).pagination({ displayMsg: ‘当前显示 {from} - {to} 条记录 共 {total} 条记录‘, total: 120, //总数 pageSize: pageSize, //行数 pageNumber: pageNumber//页数 , layout: [‘sep‘, ‘first‘, ‘prev‘, ‘links‘, ‘next‘, ‘last‘, ‘sep‘, ‘refresh‘] }); }); } getData(1, 10)
排序的情况，html脚本基本相似，这里就贴下js
$(‘#dg2‘).datagrid({ rownumbers: false , singleSelect: true , border: true , pagination: true , collapsible: false , remoteSort: true , sortOrder: "asc" , onLoadSuccess: function (row) { } , onSortColumn: function (sort, order) {//点击排序时触发事件 getData3(1, 10); alert(sort + "|||" + order) } } ); $(‘#dg2‘).datagrid(‘getPager‘).pagination({ onSelectPage: function (pageNumber, pageSize) { getData(pageNumber, 10); } });
其余相关的js
//获取用户选中的项目
function ShowValues() { var names = []; var checkedItems = $(‘#dg2‘).datagrid(‘getChecked‘); $.each(checkedItems, function (index, item) { names.push(item.CarInfo); }); if (names.length > 0) { alert(names[0]) } } function formatPrice(val, row, inex) { if (val > 300) { return ‘<span style="color:red;">(‘ + val + ‘)</span>‘; } else { return val; } }
easyui-dataGrid,布布扣,bubuko.com
原文：http://www.cnblogs.com/mfkaudx/p/3613735.html