Easyui使用代码笔记(1)----1.DataGrid（数据表格）

这是我的第一篇博客,错误的地方还望指出(也没指望有多少人来看...)。里面的内容是关于Easyui的使用代码笔记。最近在公司维护的一个项目的前端框架都是使用的Easyui。关于Easyui的博客也有非常多。但我打算将我在工作中遇到的所有关于Easyui的问题和答案记录在博客中。逐步完善。在方便自己的同时也方便别人。如果有人发现错误的地方或者不清楚的地方也欢迎留言讨论。我会经常回复的。

1.DataGrid（数据表格）,展示效果如下：

在我工作中,使用easyui-datagrid的频率是最高的。首先大家需要了解的是easyui适用于大量曾删改查的项目,而非商用网站,BBS等,如果你的项目对前端展示效果要求太高,不建议使用easyui，若想快速开发,客户内部使用的WEB软件,easyui还是挺适合的。下面贴出datagrid的通用代码：

        $('#mainTable').datagrid({
            pageNumber: 1,//初始当前页
            pageSize: 25,//每页显示的记录条数
            pageList: [5, 10, 20, 25, 30],//可以设置每页记录条数的列表
            striped: true,//是否显示斑马线效果,建议开启
            singleSelect: true,//只允许选择一行  默认false
            loadMsg: '数据加载中请稍后……',//页面数据加载时提醒用户的信息
            pagination: true,//是否显示分页工具栏。默认false
            rownumbers: true,//是否显示行列号,默认false,建议开启
            url: '/Bhps/Personal/SqlSearch/',//指向后台的url
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。 默认false,建议开启
            columns: [[//DataGrid列配置对象, 可以不写在js而写在html中,但不建议这么做。
                { field: 'ck', checkbox: true },
                { field: 'Jmjkdabh', title: '个人健康档案号', sortable: true },
                { field: 'Name', title: '姓名' },
                { field: 'SexName', title: '性别', },
                { field: 'AgeAndUnit', title: '年龄' },
                { field: 'SBirthdate', title: '出生日期' },
                { field: 'ShgxName', title: '社会关系' },
                { field: 'Idcard', title: '身份证' },
                { field: 'Address', title: '现地址' },
                { field: 'Phone', title: '联系电话' },

            ]],
            queryParams: {//参数,这里写后台方法中对应的参数
				//例 后台PersonalController 的 SqlSearch 方法需要一个参数string name
				//那么这里可以写 name = $('#Name').val();
            },

            rowStyler: function (index, row) {//这里是设置返回后的数据的样式的.可以通过返回数据进行判断后进行对应的CSS样式设置,index是索引开始行从0开始,row指对应该行的数据。(index在实际中用得很少)
                //转出
                if (row.Dqzt == 3) {
                    $("#fwdiv").css("display", "block");
                    return 'color:#6293BB';
                }
                    //死亡
                else if (row.Dqzt == 2) {
                    $("#fwdiv").css("display", "none");
                    $("#FwmlList").css("display", "none");

                    return 'color:red';
                }
                else if (row.Dqzt == 6) {
                    $("#fwdiv").css("display", "block");
                    return 'color:gray';
                }
                else {
                    $("#fwdiv").css("display", "block");
                }
            },
            onLoadSuccess: function (data) {//加载完成事件

            },
            onRowContextMenu: function (e, rowIndex, rowData) {//鼠标右击事件
                e.preventDefault(); //阻止浏览器捕获右键事件
              
            },
            onDblClickRow: function (rowIndex, rowData) {//鼠标左键双击事件

            },

        });
        //--------------------下面是分页的方法,一般可以套用
        var p = $('#mainTable').datagrid('getPager');
        $(p).pagination({
            beforePageText: '第',//页数文本框前显示的汉字
            afterPageText: '页    共 {pages} 页',
            displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
        });
		//datagrid的属性和方法、事件挺多的,具体的话需要参考手册了,这里罗列的是常用的,其中#mainTable是一个html元素的id,该元素一般为table
		//例  <table id="mainTable"></table>

Easyui其实有很多可以套用(复制粘贴)的地方,所以我目前先将easyui-datagrid的套用代码片段先整理处理,方便下次套用。第一次写博客应该有不少不尽人意的地方,欢迎大家指出更正。我会继续将我所有的eaysui代码片段依次贴出。