jquery easyui DataGrid简单示例
一、简单示例
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 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; } } }); });