一、简单示例HTML
<table id="tbList" striped="true" rownumbers="true" fix="true" fitcolumns="true" title="标题"idfield="ID" checkbox="true" url="@Url.Action（"ListData"）"><thead><tr><th field="ID" checkbox="true" width="30"></th><th field="Name" width="200" align="center">名称</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 id="tbList" style="height: 330px;" 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" width="150"> </th> </tr></thead></table>
变为单选（添加singleSelect="true" ）
复制代码 代码如下:
<table id="tbList" style="height: 330px;" 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" width="100" 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 id="radio_id" name="radio_name" 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 id="tbList" style="height: 300px;" 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" width="30" formatter="PickupList.RadioFormatter"></th></tr></thead></table> table中td的时间格式问题
1.页面
<th field="Test" formatter="Common.TimeFormatter" width="50" ></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>
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 id="tbProductList" style="height: 500px; max-height: 500px;" 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 0row: {}}）;//将新插入的那一行开户编辑状态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（","））;//这是posteditRow = undefined;},onDblClickRow: function （rowIndex, rowData） {//双击开启编辑行if （editRow ！= undefined） {datagrid.datagrid（"endEdit", editRow）;}if （editRow == undefined） {datagrid.datagrid（"beginEdit", rowIndex）;editRow = rowIndex;}}}）;}）;以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
易网时代-编程资源站