var selected = $("#tbList").datagrid("getSelections"); if (selected.length == 0) { alert("请选择！"); return; } var idString = ""; $.each(selected, function (index, item) { idString += item.Id + ","; });
方法二（1.3版本之前的解决方法）
var IsCheckFlag = true; $('#tbList').datagrid({ pagination: true, onClickCell: function (rowIndex, field, value) { IsCheckFlag = false; }, onSelect: function (rowIndex, rowData) { if (!IsCheckFlag) { IsCheckFlag = true; $("#tbList").datagrid("unselectRow", rowIndex); } }, onUnselect: function (rowIndex, rowData) { if (!IsCheckFlag) { IsCheckFlag = true; $("#tbList").datagrid("selectRow", rowIndex); } } });
设置数据列表的样式
$(document).ready(function () { //呈现列表数据 $('#tbList').datagrid({ pagination: true, rowStyler: function(index,row){ if (row.ID< 10) {//那么数据的id字段小于10的，将显示为灰色字体 return 'color:#999;';//和一般的样式写法一样 } } }); });
条件查询
复选框的bug:使用参数查询时候，在查询之前选中的选项 ，在查询之后，使用getSelections方法去获取，依旧存在该选项
解决方案：通过unselectAll在查询之前清空复选框即可
$("#btnSearch").click(function () { $('#tbList').datagrid("unselectAll"); $('#tbList').datagrid({ queryParams: { SearchName: $("#SearchName").val() } }); });
查询bug:使用参数查询时候，在查询之后，显示的当前页码还是之前的 ，不会重置为1，还是之前页码；如果当前总页数为比当前小，导致页面显示为空。比如，当前第三页，加入时间查询后，只有1页数据，那么当前页码还是3，导致页面显示空白。
解决方案：设置pageNumber为 1
$("#btnSearch").click(function () { $('#tbList').datagrid("unselectAll"); $('#tbList').datagrid({ pageNumber: 1,queryParams: { SearchName: $("#SearchName").val() } }); });
三、行数据的增删改
HTML（不分页列表）
复制代码 代码如下:
<table fix="true" fitcolumns="true" idfield="ID" url="@Url.Action("ListData")"></table>
JS
$(document).ready(function () { var datagrid; var editRow = undefined; datagrid = $("#tbList").datagrid({ border: true, checkbox: true, iconCls: 'icon-save', //图标 nowap: true, //列内容多时自动折至第二行 pagination: false, rownumbers: true, striped: true, //行背景交换 columns: [[//显示的列 { field: 'ID', title: '编号', width: 100, align: 'center', sortable: true, checkbox: true }, { field: 'Name', title: '名称', width: 100, sortable: true }, { field: 'PriceType', title: '类型', width: 100, align: 'center', formatter: function (value, row) { return row.TypeName; }, editor: { type: 'combobox', options: { valueField: 'Value', textField: 'Text', method: 'get', url: $("#TypeUrl").val(), required: true } } }, { field: 'Price', title: '价格', width: 100, align: 'center', editor: { type: 'numberbox', options: { required: true, min: 0, precision: 2 } } }, { field: 'Count', title: '数量', width: 100, align: 'center', editor: { type: 'numberbox', options: { required: true, min: 0, precision: 0 } } } ]], queryParams: { action: 'query' }, //查询参数 toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等 //添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑 if (editRow != undefined) { datagrid.datagrid("endEdit", editRow); } //添加时如果没有正在编辑的行，则在datagrid的第一行插入一行 if (editRow == undefined) { datagrid.datagrid("insertRow", { index: 0, // index start with 0 row: { } }); //将新插入的那一行开户编辑状态 datagrid.datagrid("beginEdit", 0); //给当前编辑的行赋值 editRow = 0; } } }, '-', { text: '删除', iconCls: 'icon-remove', handler: function () { //删除时先获取选择行 var rows = datagrid.datagrid("getSelections"); //选择要删除的行 if (rows.length > 0) { $.messager.confirm("提示", "你确定要删除吗?", function (r) { if (r) { var ids = []; for (var i = 0; i < rows.length; i++) { ids.push(rows[i].ID); } //将选择到的行存入数组并用,分隔转换成字符串 if ($.trim(ids) != "") { //---- Delete(ids.join(','));//这是post } else { alert("请选择要删除的信息！"); } } }); } else { $.messager.alert("提示", "请选择要删除的行", "error"); } } }, '-', { text: '修改', iconCls: 'icon-edit', handler: function () { //修改时要获取选择到的行 var rows = datagrid.datagrid("getSelections"); //如果只选择了一行则可以进行修改，否则不操作 if (rows.length == 1) { //修改之前先关闭已经开启的编辑行，当调用endEdit该方法时会触发onAfterEdit事件 if (editRow != undefined) { datagrid.datagrid("endEdit", editRow); } //当无编辑行时 if (editRow == undefined) { //获取到当前选择行的下标 var index = datagrid.datagrid("getRowIndex", rows[0]); //开启编辑 datagrid.datagrid("beginEdit", index); //把当前开启编辑的行赋值给全局变量editRow editRow = index; //当开启了当前选择行的编辑状态之后， //应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑 datagrid.datagrid("unselectAll"); } } } }, '-', { text: '保存', iconCls: 'icon-save', handler: function () { //保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台 datagrid.datagrid("endEdit", editRow); } }, '-', { text: '取消编辑', iconCls: 'icon-redo', handler: function () { //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行 editRow = undefined; datagrid.datagrid("rejectChanges"); datagrid.datagrid("unselectAll"); } }, '-'], onAfterEdit: function (rowIndex, rowData, changes) { //endEdit该方法触发此事件 //console.info(rowData); //---- Update(ids.join(','));//这是post editRow = undefined; }, onDblClickRow: function (rowIndex, rowData) { //双击开启编辑行 if (editRow != undefined) { datagrid.datagrid("endEdit", editRow); } if (editRow == undefined) { datagrid.datagrid("beginEdit", rowIndex); editRow = rowIndex; } } }); });