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/

一、简单示例

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" ）

加载数据后默认全选：

 $(document).ready(function () {
        $('#tbList').datagrid({ 
            onLoadSuccess: function (data) {
                $('#tbList').datagrid('selectAll');
            } 
        });

获取行数

$('#tbList').datagrid("getRows").length;

隐藏列

清空原有数据

方法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.页面

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;
                }
            }
        });
    });

jquery easyui DataGrid

一、简单示例

二、基本用法

冻结列

去掉分页

复选框以及单选

获取行数

隐藏列

清空原有数据

行点击事件

datagrip单击行的时候，将单选按钮设置为选中

table中td的时间格式问题

table中td内容太长自动换行

行和复选框的分离

设置数据列表的样式

条件查询

三、行数据的增删改

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

jquery easyui DataGrid

一、简单示例

二、基本用法

冻结列

去掉分页

复选框以及单选

获取行数

隐藏列

清空原有数据

行点击事件

datagrip单击行的时候，将单选按钮设置为选中

table中td的时间格式问题

table中td内容太长自动换行

行和复选框的分离

设置数据列表的样式

条件查询

三、行数据的增删改

热门文章

最新文章

相关课程

相关电子书