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 )

  1. $('#tbList').datagrid({ pagination: true,
  2. frozenColumns: [[
  3. { field: 'BId',checkbox:'true',width:30},
  4. { field: 'BNo', title: '牌号', width: 100 },
  5. { field: 'FNo', title: '班号', width: 100 }
  6.   ]],
  7.        fitColumns:false //禁止自适应宽度、可以水平滚动
  8. });

去掉分页(2013-02-20)

$('#tbList').datagrid({pagination: true});

更改为

$('#tbList').datagrid();

$('#tbList').datagrid({pagination: false});

注意:同时需要设置table的高度,而且不能为auto

复选框以及单选(2013-02-20)

  1. <table id="tbList" style="height: 330px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit"
    checkbox="true" idfield="Id" url="@Url.Action("ListData")">
  2. <thead>
  3. <tr>
  4.   <th field="Id" checkbox="true" width="150">
  5.   </th>
        </tr>
  6. </thead>
  7. </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")">

加载数据后默认全选:

  1. $(document).ready(function () {
  2. $('#tbList').datagrid({
  3. onLoadSuccess: function (data) {
  4. $('#tbList').datagrid('selectAll');
  5. }
  6. });

获取行数(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):

  1. <script type="text/javascript">
  2. var List = {};
  3. List.RadioFormatter = function (value, rec, index) {
  4. return "<input id='radio_id' name='radio_name' type='radio' value='" + rec.Id + "'/>";
  5. };
  6.  
  7.  $(document).ready( function(){ //呈现列表数据
  8.   $('#tbList').datagrid({ onClickRow:
  9. function () {
  10. //单击行的时候,将单选按钮设置为选中
  11. var id = $('#tbList').datagrid("getSelected");
  12. $("input[name='name']").each(function () {
  13. if ($(this).val() == id.Id) {
  14. $(this).attr("checked", true);
  15. }
  16. });
  17. }
  18. });
  19. });
  20. </script>
  21. <table id="tbList" style="height: 300px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit"
  22. singleSelect="true" checkbox="true" idfield="Id" url="@Url.Action("ListData")">
  23. <thead>
  24. <tr>
  25. <th field="Id" width="30" formatter="PickupList.RadioFormatter">
  26. </th>
  27. </tr>
  28. </thead>
  29. </table>

table中td的时间格式问题(2013-03-14)

1.页面

<th field="Test" formatter="Common.TimeFormatter" width="50" ></th>

2.js

  1. var Common = {
  2. //EasyUI用DataGrid用日期格式化
  3. TimeFormatter: function (value, rec, index) {
  4. if (value == undefined) {
  5. return "";
  6. }
  7. /*json格式时间转js时间格式*/
  8. value = value.substr(1, value.length - 2);
  9. var obj = eval('(' + "{Date: new " + value + "}" + ')');
  10. var dateValue = obj["Date"];
  11. if (dateValue.getFullYear() < 1900) {
  12. return "";
  13. }
  14. var val = dateValue.format("yyyy-mm-dd HH:MM");//控制格式
  15. return val.substr(11, 5);
  16. }
  17.  
  18. };

table中td内容太长自动换行(2013-03-18)

 添加属性 nowrap="false"

行和复选框的分离(2013-03-25)

方法一:(1.3版本才能用)

checkOnSelect="false" selectOnCheck="false"

注意:当使用$("#tbList").datagrid("getSelections");时候,只有行被选中,才能取到该行。一般情况,选中行时候,行为黄色背景。

eg.<table checkOnSelect="false"> </table>

  1. var selected = $("#tbList").datagrid("getSelections");
  2. if (selected.length == 0) {
  3. alert("请选择!");
  4. return;
  5. }
  6.  
  7. var idString = "";
  8. $.each(selected, function (index, item) {
  9. idString += item.Id + ",";
  10. });

方法二(1.3版本之前的解决方法)

  1. var IsCheckFlag = true;
  2. $('#tbList').datagrid({
  3. pagination: true,
  4. onClickCell: function (rowIndex, field, value) {
  5. IsCheckFlag = false;
  6. },
  7. onSelect: function (rowIndex, rowData) {
  8. if (!IsCheckFlag) {
  9. IsCheckFlag = true;
  10. $("#tbList").datagrid("unselectRow", rowIndex);
  11. }
  12. },
  13. onUnselect: function (rowIndex, rowData) {
  14. if (!IsCheckFlag) {
  15. IsCheckFlag = true;
  16. $("#tbList").datagrid("selectRow", rowIndex);
  17. }
  18. }
  19. });

设置数据列表的样式

  1. $(document).ready(function () {
  2. //呈现列表数据
  3. $('#tbList').datagrid({ pagination: true,
  4. rowStyler: function(index,row){
  5. if (row.ID< 10) {//那么数据的id字段小于10的,将显示为灰色字体
  6. return 'color:#999;';//和一般的样式写法一样
  7. }
  8. }
  9. });
  10. });

条件查询

复选框的bug:使用参数查询时候,在查询之前选中的选项 ,在查询之后,使用getSelections方法去获取,依旧存在该选项

解决方案:通过unselectAll在查询之前清空复选框即可

  1. $("#btnSearch").click(function () {
  2. $('#tbList').datagrid("unselectAll");
  3. $('#tbList').datagrid({ queryParams: { SearchName: $("#SearchName").val() } });
  4. });

jquery easyui DataGrid的更多相关文章

  1. jQuery EasyUI datagrid实现本地分页的方法

    http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...

  2. jQuery EasyUI DataGrid Checkbox 数据设定与取值

    纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...

  3. jquery easyui datagrid使用参考

    jquery easyui datagrid使用参考   创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...

  4. Jquery easyui datagrid 导出Excel

    From:http://www.cnblogs.com/weiqt/articles/4022399.html datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <sc ...

  5. jquery easyui datagrid 获取Checked选择行(勾选行)数据

    原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...

  6. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  7. jquery easyui datagrid 加每页合计和总合计

    jquery easyui datagrid 加每页合计和总合计 一:效果图 二:代码实现 这个只有从后台来处理 后台根据rows 和page两个参数返回的datatable 命名为dt 然后根据dt ...

  8. jQuery EasyUI datagrid列名包含特殊字符会导致表格错位

    首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了. 洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为 ...

  9. jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条

    jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条 ============================== 蕃薯耀 2018年2月6日 http://www. ...

  10. 浅谈jQuery easyui datagrid操作单元格样式

    今天项目上遇到问题,就是表格风格统一的问题,由于用了2个不同的框架,所以如果要大修比较麻烦,考虑到修改表格样式工作量会少很多,所以考虑修改jQuery easyui datagrid数据网格的样式. ...

随机推荐

  1. 知道创宇研发技能表v2.2

    知道创宇研发技能表v2.2 2014/3/9 发布 by @知道创宇(www.knownsec.com) @余弦 & 行之 知道创宇是国内Geek十足且普遍被认为特别有前途的互联网安全公司, ...

  2. Ubuntu 14.10 下安装Synergy,不同电脑之间公用一套键盘鼠标

    因为工作时候有多台电脑放在一起,如果每个用一套键盘鼠标很是不方便,所以希望能够不用电脑之间公用一套键盘鼠标. Synergy可以实现不同电脑之间公用一套键盘鼠标,并且支持简单的复制粘贴.很好用. 它还 ...

  3. android中string.xml引起的常见编译错误

    1.遇到如下错误的时候说明你需要在单引号签名加转义字符(\): 1 Description Resource Path Location Type error: Apostrophe not prec ...

  4. bootstrap菜单完美解决---原创

    由于bootstrap的各方优点,偶的“点金项目细化分包管理平台”决定采用它.但在使用中遇到了一些问题,比如菜单的问题,这个菜单是用的一个JQuery的一个效果,点击后,所点击的链接处的class要加 ...

  5. BZOJ3028 食物 (生成函数)

    首先 1+x+x^2+x^3+...+x^∞=1/(1-x) 对于题目中的几种食物写出生成函数 (对于a*x^b , a表示方案数 x表示食物,b表示该种食物的个数) f(1)=1+x^2+x^4+. ...

  6. Smart210学习记录-------linux内核模块

    Linux 驱动工程师需要牢固地掌握 Linux 内核的编译方法以为嵌入式系统构建可运行的Linux 操作系统映像.在编译 LDD6410 的内核时,需要配置内核,可以使用下面命令中的 一个: #ma ...

  7. C#山寨版本【天翼拨号客户端】---内含详细抓包,模拟数据---万事俱备,只欠东风。

    官方的客户端的最大缺点: 1.一台电脑不允许使用同时启动多个网卡(目的是禁止使用虚拟WIFI或通过网卡后共享网络到路由器?): 2.使用路由器无法拨号(提示:不允许NAT后登录) 3.之前用某哥们破解 ...

  8. PostgreSQL高可用性、负载均衡、复制与集群方案介绍

    目录[-] 一.高可用性.负载均衡.复制的几个方案比较: 二.多节点集群方案比较 9.3官方文档(中文):http://58.58.27.50:8079/doc/html/9.3.1_zh/high- ...

  9. 【题解】【数组】【Prefix Sums】【Codility】Genomic Range Query

    A non-empty zero-indexed string S is given. String S consists of N characters from the set of upper- ...

  10. Think Python - Chapter 11 - Dictionaries

    Dictionaries A dictionary is like a list, but more general. In a list, the indices have to be intege ...