jquery easyui DataGrid
Easyui Demo网站:
http://www.jeasyui.com/ 英文
http://www.phptogether.com/juidoc/ 中文
datagrip的基本属性方法:http://www.phptogether.com/juidoc/datagrid.html
推荐:http://www.cnblogs.com/Philoo/tag/jQuery/
冻结列 (2013-01-17 )
$('#tbList').datagrid({ pagination: true, frozenColumns: [[ { field: 'BId',checkbox:'true',width:30}, { field: 'BNo', title: '牌号', width: 100 }, { field: 'FNo', title: '班号', width: 100 } ]], fitColumns:false //禁止自适应宽度、可以水平滚动 });
去掉分页(2013-02-20)
$('#tbList').datagrid({pagination: true});
更改为
$('#tbList').datagrid();
或
$('#tbList').datagrid({pagination: false});
注意:同时需要设置table的高度,而且不能为auto
复选框以及单选(2013-02-20)
<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'); } });
获取行数(2013-02-20)
$('#tbList').datagrid("getRows").length;
隐藏列(2013-02-20)
<th field="Dept" width="100" hidden="true">名称</th>
清空原有数据(2013-02-20)
方法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:载入本地数据,旧记录将被移除。
事件(2013-02-20):
$('#tbList').datagrid({ onClickRow: function () {//代码 } });
datagrip单击行的时候,将单选按钮设置为选中(2013-02-20):
<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的时间格式问题(2013-03-14)
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内容太长自动换行(2013-03-18)
添加属性 nowrap="false"
行和复选框的分离(2013-03-25)
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 + ","; });
设置数据列表的样式
$(document).ready(function () { //呈现列表数据 $('#tbList').datagrid({ pagination: true, rowStyler: function(index,row){ if (row.ID< 10) {//那么数据的id字段小于10的,将显示为灰色字体 return 'color:#999;';//和一般的样式写法一样 } } }); });
相关推荐
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
JS EasyUI DataGrid动态加载数据
easyUI datagrid 自动调整行号大小
EasyUI DataGrid过滤用法实例
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
easyui datagrid 多条件筛选 可复选 过滤 例如过滤200-300 500-600 类似淘宝筛选 但允许复选
easyUI datagrid 行上移,下移,置顶,置底的方法
解决EasyUIdataGrid列比较多,无数据,列展现不全
EasyUI Datagrid 中文排序的问题 解决了WEB端和后台(Oracle、MySQL)中文排序问题
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
easyui datagrid 导出到excel,图解
在easyui 的datagrid编辑状态下实时更新其他处于编辑或者没在编辑下的列值,并在结束编辑后得到的row的数据为更改后的数据。
easyUI datagrid 实现行上移,下移,置顶,置底,绑定键盘事件 键盘“↑”表示上移,键盘“↓”表示下移,键盘Ctrl+“↑”表示置顶,键盘Ctrl+“↓”表示置底。
一个update扩展方法 文档中一种是比较笨的方法 一次只能修改一个列而且受列编辑类型影响(比如number datetime)扩展一次编辑多列,不受编辑类型影响,没有编辑属性也可以。
使用SSM框架+EasyUI DataGrid数据表格实现了基本的增删改查,以及对数据分页,排序功能的实现。是一个对于后台管理的很好的例子,因为一般企业后台管理都是使用EasyUI等框架快速搭建,而且DataGrid是EasyUI最重要的...
easyui datagrid 嵌套datagrid form 简单提交 ,刷新子表数据
jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。
在easy ui datagrid 列表基础上实现行过滤[行模糊查询],注:数据库远程查询