jquery easyui DataGrid-阿里云开发者社区

开发者社区> 芝麻软件> 正文

jquery easyui DataGrid

简介: Easyui Demo网站: http://www.jeasyui.com/  英文 http://www.phptogether.com/juidoc/  中文 datagrip的基本属性方法:http://www.
+关注继续查看

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

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


 

 

 

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10089 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11631 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13892 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9161 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4508 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22405 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
+关注
芝麻软件
编程语言,框架相关专家
579
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载