第三节：剖析核心组件datagrid、dialog 和 form表单、ValidateBox格式校验用法

一. 剖析datagrid表格

1. 表格的初始化

    这里我们通过js的方式来创建。

(1). 首先要有一个table标签，用于承载显示表格。

<table id="j_dgUser"></table>

(2). 通过js初始化

  $("#j_dgUser").datagrid({
                            url: GetUserInforByConditionUrl + "?auth=" + myUtils.localGet('token'),
                            iconCls: 'icon-save',
                            fit: true, // 自动适应父容器大小
                            fitColumns: false, //自动收缩列的大小
                            rownumbers: false, //显示列号
                            nowrap: true, //如果为true，则在同一行中显示数据
                            animate: false,
                            border: true, //有边框
                            singleSelect: false,
                            idField: 'id', //标识字段
                            pagination: true, //数据表格控件底部显示分页工具栏
                            pageSize: 15,
                            pageList: [5, 10, 15, 20, 25, 30, 50, 100],
                            queryParams: {
                                userSex: -1,
                            },
                            frozenColumns: [
                                [{
                                    title: '主键编号',
                                    field: 'id',
                                    align: 'center',
                                    checkbox: true
                                }]
                            ],
                            //活动列
                            columns: [
                                [{
                                        title: '账号',
                                        field: 'userAccount',
                                        align: 'center',
                                        sortable: true,
                                        width: 180
                                    },
                                    {
                                        title: '姓名',
                                        field: 'userRealName',
                                        align: 'center',
                                        sortable: true,
                                        width: 240
                                    },
                                    {
                                        title: '性别',
                                        field: 'userSex',
                                        align: 'center',
                                        sortable: true,
                                        width: 100,
                                        formatter: function(value, row, index) {
                                            if (value == 0) {
                                                return "女";
                                            } else if (value == 1) {
                                                return "男";
                                            } else {
                                                return "";
                                            }
                                        }
                                    }
                                ]
                            ],
                            onLoadSuccess: function(data) {                     
                            },
                            onLoadError: function() {
                                myUtils.messagerAlert('提示', '请求失败');
                            }
                        });

(3). 前后端数据交互

 A. 前端传递后端的固定参数

B. 后端返回给前端的数据

  固定格式：total表示总条数，rows显示当页的数据。

  数据格式：

{
    "total": 2,
    "rows": [{
        "id": "5e57940893d240aba09102fe3632d61a",
        "userAccount": "2333334",
        "userRealName": "33333333333333333333",
        "userSex": 0,
        "userPhone": "8888",
        "addTime": "2021-01-29 10:17:11"
    }, {
        "id": "93a7753627c2413aa910754f92e288bd",
        "userAccount": "666666666666",
        "userRealName": "6666666666666",
        "userSex": 1,
        "userPhone": "435",
        "userRemark": "767",
        "addTime": "2021-01-26 15:03:23"
    }]
}

2. 表格的两种选中模式

(1). 点击行，行+复选框都被选中；点击复选框，行+复选框都被选中

A. 通过以下两个属性来实现，这两属性默认都为true，所以表格默认初始化就是这种效果。

 

B. 获取选中行

var nodes = $('#j_dgUser').datagrid('getSelections');    //获取所有选中行

C. 其它

//表格重载    
$('#j_dgUser').datagrid('reload');  
//取消所有选中行
$('#j_dgUser').datagrid('unselectAll');     

(2). 点击复选框选中，行不变色 + 点击行，行不变色，复选框也不选中

A. 将checkOnSelect 和 selectOnCheck两个属性都改为false，同时添加一个onBeforeSelect事件return false，取消动作。

 

B. 获取选中行 

var nodes = $('#j_dgUser').datagrid('getSelected');    //获取所有选中行

3. 表格中按钮事件初始化 + 传值方案

(1). 表格onloadSuccess时初始化按钮事件 + data-key传递值 + 子div传递json字符串

  传递多个值的需要多次转换处理才能用。 

{
                                        title: '操作',
                                        field: 'oper',
                                        align: 'center',
                                        width: 240,
                                        formatter: function(value, row, index) {
                                            var rowStr = JSON.stringify(row);
                                            var html = '<div class="tablerow">' +
                                                '<span  class="btn height24 yDel" data-key="' + row.id + '">删除</span>' +
                                                '<span  class="btn height24 yEdit">编辑<div style="display:none">"' + rowStr + '"</div></span>' +
                                                '<span  class="btn height24 ySetRole" data-key="' + row.id + '">设置角色</span>' +
                                                '</div>';
                                            return html;
                                        }
}

(2).  直接在按钮上添加onclick + 传递单个值/json字符串 （推荐）

  传递单个值的时候直接传递即可，传递整个Json字符串的时候需要转换一下再传递。

{
    title: '操作',
    field: 'cz',
    align: "center",
    width: 260,
    formatter: function(value, row, index) {
        var rowStr = JSON.stringify(row).replace(/"/g, '"');
        var strHtml =
                      '<div class="tablerow">' +
                         '<button  class="btn height28" onclick="pageUtil.delRoleOne(\'' + row.id + '\')">删除</button>' +
                         '<button  class="btn height28" onclick="pageUtil.editRole(\'' + rowStr + '\')">编辑</button>' +
                         '<button  class="btn height28" onclick="pageUtil.setPermission(\'' + row.id + '\')">设置权限</button>' +
                       '</div>';
        return strHtml;
   }
}

 

4. 父子表格嵌套

 　该嵌套属于EasyUI的一个扩展，需要单独引入 datagrid-detailview.js 脚本库。

(1). 给父表格添加下面固定代码

　展开内容中添加一个删除按钮，一个table标签，table的id为 ddv-rowIndex，rowIndex代表父表格的行索引

view: detailview,
detailFormatter: function(rowIndex, rowData) {
     return '<button class="sonDelBtn btn height28" data-id="' + rowData.id + '"  onclick="pageUtil.sonDel(' + rowIndex + ')"  >删除</button>' +
            '<div class="sonTable"><table id="ddv-' + rowIndex + '"></table></div>';
},

(2). 给父表格添加展开事件

　 点击展开，触发初始化子表格事件

//展开行时触发
 onExpandRow: function(index, row) {
     pageUtil.sonTableInit(index, row);
}

 初始化子表格事件

sonTableInit: function(index, row) {
                        var dGrid = $("#ddv-" + index).datagrid({
                            url: GetRoleUserUrl + "?auth=" + myUtils.localGet('token'),
                            queryParams: {
                                id: row.id
                            },
                            fit: true,
                            fitColumns: false,
                            border: true,
                            singleSelect: false, //单选模式
                            rownumbers: true,
                            idField: 'id',
                            pagination: true,
                            pageSize: 15,
                            pageList: [15, 20, 30, 40, 50],
                            columns: [
                                [{
                                        field: 'id',
                                        title: 'iD',
                                        width: 25,
                                        checkbox: true
                                    },
                                    {
                                        field: 'userAccount',
                                        title: '账号',
                                        align: "center",
                                        width: 150,
                                        sortable: false
                                    },
                                    {
                                        field: 'userRealName',
                                        title: '姓名',
                                        align: "center",
                                        width: 150,
                                        sortable: false

                                    },
                                    {
                                        field: 'userSex',
                                        title: '性别',
                                        align: "center",
                                        width: 80,
                                        sortable: false,
                                        formatter: function(value, row, index) {
                                            if (value == "0") {
                                                return "男";
                                            } else {
                                                return "女";
                                            }
                                        }

                                    },
                                    {
                                        field: 'userPhone',
                                        title: '电话',
                                        align: "center",
                                        width: 150,
                                        sortable: false

                                    }, {
                                        field: 'userRemark',
                                        title: '说明',
                                        align: "center",
                                        width: 250,
                                        sortable: false

                                    },
                                    {
                                        field: 'addTime',
                                        title: '添加时间',
                                        align: "center",
                                        width: 180,
                                        sortable: false
                                    },

                                ]
                            ],
                            onLoadError: function(xhr) {
                                myUtils.messagerAlert('提示', '请求失败');
                            },
                        });
                    },

效果： 

 

 

 

二. 剖析dialog弹框

1. 初始化

(1). 直接以一个现成div来初始化

<div id="dd">Dialog Content.</div> 

 调用：

$('#dd').dialog({    
    title: 'My Dialog',    
    width: 400,    
    height: 200,    
    closed: false,    
    cache: false,     
    modal: true   
}); 

(2). 通过href定位到一个新页面

A. 将dialog基础属性封装一下

dialog: function(options) {
        var opts = $.extend({
            modal: true,
            onClose: function() {
                $(this).dialog('destroy');
            }
        }, options);
        return $('<div/>').dialog(opts);
},

B. 调用封装

                     var pshow = myUtils.dialog({
                            title: '搜索',
                            width: 550,
                            height: 460,
                            href: 'searchRole.html',
                            onLoad: function() {
                                pshow.find('form').form("load", searchObj);
                            },
                            buttons: [{
                                text: '搜索',
                                handler: function() {
                                    var f = pshow.find('form');
                                    searchObj = myUtils.serializeObject(f);
                                    dg.datagrid('unselectAll');
                                    dg.datagrid('load', searchObj);
                                    pshow.dialog('close');
                                }
                            }, {
                                text: '重置',
                                handler: function() {
                                    pshow.find('form').form("reset"); //重置
                                    searchObj = {
                                        roleName: "",
                                        operDateStart: "",
                                        operDateEnd: ""
                                    };
                                }
                            }],
                        })

2. 父子页面传值的几种方式 

(1).  父页面获取子页面标签

　A. 比如子页面有一个id为j_txt的input标签，在父页面可以直接 $('#j_txt')来获取。

   B. 如上述代码，var f = pshow.find('form');  直接获取form标签。

(2). 子页面获取父页面的标签

   同上也是可以直接调用，子页面需要获取父页面值的时候，比如可以在父页面定义一个隐藏域，存值；在子页面直接调用即可。

父：

<!-- 隐藏域--用于父子页面传值 -->
<input type="hidden" id="j_userIdHid" value="">

子：

//获取父页面隐藏域中的值
var userId=$('#j_userIdHid').val();        

(3). 子页面获取父页面的方法

  用法：window.parent.xxxx

父：

(function(w){
    //全局变量    
    //一. 各种初始化
    var mainUtil={
        init:function(){
            
        },
    };    
    //三. 其他
    var otherUtil={
        addTab:function(){            
        }
    };        
    //对外公开
    w.mainUtil=mainUtil;
    w.otherUtil=otherUtil;    
})(window);

//页面加载
$(function () {
    mainUtil.init();
});

子：

window.parent.otherUtil.addTab();

 

三. form表单、ValidateBox验证

1. form基本用法

　直接使用form标签包裹即可。

    <form id="j_form">
        <div class="form-item">
            <label>角色名称</label>
            <div class="item-content">
                <input name="roleName" type="text" class="contentinput easyui-validatebox" data-options="required:true,validType:'length[2,20]',invalidMessage:'请输入2-20位字符'" maxlength="20" autocomplete="off" />
            </div>
        </div>

        <div class="form-item">
            <label>角色说明</label>
            <div class="item-content">
                <textarea name="roleRemark" type="text" class="contentinput easyui-validatebox" data-options="validType:'length[0,30]',invalidMessage:'最多输入30位字符'" maxlength="30" 
                style="min-height: 0!important;height: 170px;width: 320px;" autocomplete="off" ></textarea>
            </div>
        </div>
    </form>

2. ValidateBox 格式校验

(1).  标签需要添加在  class="easyui-validatebox"，然后编写验证规则  data-options="required:true,validType:'email'" ，如下：

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />  

(2). 也可以自定义验证规则

$.extend($.fn.validatebox.defaults.rules, {    
    minLength: {    
        validator: function(value, param){    
            return value.length >= param[0];    
        },    
        message: 'Please enter at least {0} characters.'   
    }    
}); 

使用

<input class="easyui-validatebox" data-options="validType:'minLength[5]'"> 

(3). 与form表单结合使用

 

 

var check = $('#j_form').form('enableValidation').form('validate');
if (!check) {
   return;
}

3. 赋值与清空

(1). 清空或重置

$('#j_form').form("reset"); //重置
$('#j_form').form("clear"); //清空

(2). 赋值

$('#j_form').form('load','get_data.php');    // 读取表单的URL
$('#j_form').form('load',{
    userName:'ypf',
    email:'mymail@gmail.com',
    subject:'subject2',
    message:'message2',
    language:5
});

4. 封装获取form中的内容

(1). 封装把表单元素序列化成对象，把form对象直接传递进去。

serializeObject: function(form) {
　　var o = {};
　　$.each(form.serializeArray(), function(intdex) {
　　if (o[this['name']]) {
　　　　o[this['name']] = o[this['name']] + "," + this['value'];
　　} else {
　　　　o[this['name']] = this['value']
　　}
　});
return o;
},

(2). 可直接用于ajax传值。 

　　　　　　　　　　　　　　　　　　　　　var f = pshow.find('form');
                                    //在这里可对其进行验证
                                    var check = f.form('enableValidation').form('validate');
                                    if (!check) {
                                        return;
                                    }
                                    var data = myUtils.serializeObject(f);
                                    myUtils.ajax("post", AddRoleUrl, data, function(jsonData) {
                                        if (jsonData.status == "ok") {
                                            $('#j_dgTable').datagrid('reload');
                                            $('#j_dgTable').datagrid('unselectAll');
                                            pshow.dialog('close');
                                        }
                                        myUtils.alertMsg(jsonData.msg, '提示');
                                    })

 

 

 

 

 

 

 

!

• 作       者 : Yaopengfei(姚鹏飞)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 声     明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
• 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。