<table striped="true" rownumbers="true" fix="true" fitcolumns="true" title="标题" idfield="ID" checkbox="true" url="@Url.Action("ListData")"> <thead> <tr> <th field="ID" checkbox="true"> </th> <th field="Name"> 名称 </th> </tr> </thead> </table>
JS
$('#tbList').datagrid({ pagination: true }); $("#btnSearch").click(function () {//查询方法 $('#tbList').datagrid("unselectAll"); $('#tbList').datagrid({ queryParams: { SearchName: $("#SearchName").val()} }); });
二、基本用法
冻结列
$('#tbList').datagrid({ pagination: true, frozenColumns: [[ { field: 'BId',checkbox:'true',width:30}, { field: 'BNo', title: '牌号', width: 100 }, { field: 'FNo', title: '班号', width: 100 } ]], fitColumns:false //禁止自适应宽度、可以水平滚动 });
去掉分页
$('#tbList').datagrid({pagination: true});
更改为
$('#tbList').datagrid();
或
$('#tbList').datagrid({pagination: false});
注意：同时需要设置table的高度，而且不能为auto
复选框以及单选
<table striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit" checkbox="true" idfield="Id" url="@Url.Action("ListData")"> <thead> <tr> <th field="Id" checkbox="true"> </th> </tr> </thead> </table>
变为单选（添加singleSelect="true" ）
复制代码 代码如下:
<table striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit" singleSelect="true" checkbox="true" idfield="Id" url="@Url.Action("ListData")">
加载数据后默认全选：
$(document).ready(function () { $('#tbList').datagrid({ onLoadSuccess: function (data) { $('#tbList').datagrid('selectAll'); } });
获取行数
$('#tbList').datagrid("getRows").length;
隐藏列
<th field="Dept" hidden="true">名称</th>
清空原有数据
方法1：
var item = $('#filegrid').datagrid('getRows'); if (item) { for (var i = item.length - 1; i >= 0; i--) { var index = $('#filegrid').datagrid('getRowIndex', item[i]); $('#filegrid').datagrid('deleteRow', index); } }
方法2：(测试过)
$('#filegrid').datagrid('loadData', { total: 0, rows: [] });
解析：loadData：载入本地数据，旧记录将被移除。
行点击事件
$('#tbList').datagrid({ onClickRow: function () {//代码 } });
datagrip单击行的时候，将单选按钮设置为选中
<script type="text/javascript"> var List = {}; List.RadioFormatter = function (value, rec, index) { return "<input type='radio' value='" + rec.Id + "'/>"; }; $(document).ready( function(){ //呈现列表数据 $('#tbList').datagrid({ onClickRow: function () { //单击行的时候，将单选按钮设置为选中 var id = $('#tbList').datagrid("getSelected"); $("input[name='name']").each(function () { if ($(this).val() == id.Id) { $(this).attr("checked", true); } }); } }); }); </script> <table striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit" singleSelect="true" checkbox="true" idfield="Id" url="@Url.Action("ListData")"> <thead> <tr> <th field="Id" formatter="PickupList.RadioFormatter"> </th> </tr> </thead> </table>
table中td的时间格式问题
1.页面
<th field="Test" formatter="Common.TimeFormatter" ></th>
2.js
var Common = { //EasyUI用DataGrid用日期格式化 TimeFormatter: function (value, rec, index) { if (value == undefined) { return ""; } /*json格式时间转js时间格式*/ value = value.substr(1, value.length - 2); var obj = eval('(' + "{Date: new " + value + "}" + ')'); var dateValue = obj["Date"]; if (dateValue.getFullYear() < 1900) { return ""; } var val = dateValue.format("yyyy-mm-dd HH:MM");//控制格式 return val.substr(11, 5); } };
table中td内容太长自动换行
添加属性 nowrap="false"
将nowrap: false这个属性设置在table的属性中，不要设置在字段的属性中，字段可以设置宽度，这样就可以做到当文字长度超过规定的宽度后自动换行了
行和复选框的分离
方法一：（1.3版本才能用）
checkOnSelect="false" selectOnCheck="false"
注意：当使用$("#tbList").datagrid("getSelections");时候，只有行被选中，才能取到该行。一般情况，选中行时候，行为黄色背景。
eg.<table checkOnSelect="false"> </table>