easyui部分组件使用经验

easyui-switchbutton

需要实现在数据表格中有一列如下图，最开始参考官网，不完全可用，还得借助百度：

 //其中onclick都是不可行的，是错误示例
 {
title: '状态',field: 'ie',align: "center",width: 100,
formatter: function (value, row, index) {
    if (value === 'Y') {
                        return "<form><input id='" + row.id + "'  class='easyui-switchbutton switchBtn' data-options=\"onText:'启用',offText:'禁用' \" checked onclick=changeState1(" + JSON.stringify(row).replace(/"/g, '&quot;') + ")></form>"
                    } else if (value === 'N') {      return "<form><input id='" + row.id + "'  class=\"easyui-switchbutton switchBtn\" data-options=\"onText:'启用',offText:'禁用', onclick: changeState1(" + JSON.stringify(row).replace(/"/g, '&quot;') + ") \"></form>"
                    }
                }
            }, `
  //简单的正确示例
  return "<form><input id='" + row.id + "'  class='easyui-switchbutton switchBtn'></form>"

//正确示范
 onLoadSuccess: function (data) {
                    $('.editParam').linkbutton();
                    $(".switchBtn").switchbutton({
                        height: 18,
                        onText: "启用",
                        offText: "停用",
                        onChange: function (checked) {
                            //Y启用 true N禁用 false
                            var state = 'Y';
                            if (!checked) {
                                state = 'N';
                            }
                            var id = $(this).attr("id");
     //错误示范
     // $('#sw111').switchbutton({
        //     onChange: function(data){
        //         console.log("datasw111:" +JSON.stringify(data))
        // }});
        // $('.switchBtn').switchbutton({
        //     onChange: function(data){
        //         console.log("datasw:" +JSON.stringify(data))
        //     }
        // })                       

1.class=‘easyui-switchbutton switchBtn’ 并且配合$(".switchBtn").switchbutton(）才能显示成功2.点击该按钮调用启用禁用方法，在单行onclick调用外部方法不行，使用$(’#sb’).switchbutton(‘disable’)方式调用onchange也都失败或无法实现想要的效果。只有在表格的onLoadSuccess 中$(".switchBtn").switchbutton({下添加onchange方法才能达到想要效果；
3.单行的id在方法中var id = $(this).attr(“id”);这种方式获取id；

easyui-tree

1显示树

<div class="easyui-panel" data-options="border:false,footer:'#ft'">
    <form class="fast-form" id="adsrm">
        <div class="easyui-tree" id="depree"></div>
    </form>
</div>
<script type="text/javascript">

    var id = "${id!}"

    /**
     * 初始化下拉框的相关参数
     */
    $(function () {

        $('#deptTree').tree({
            url: ctx + '/a/getptTree?id=FP',
            method: 'GET',
            editable: false,
            idField: 'id',
            textField: 'name',
            checkbox: true,
            parentField: 'pid', // 扁平tree数据结构支持
            lines: true
        });

2回显树

/**
         * 编辑回显树
         */
        if (judgeNull(id)) {
            //先将回显数据全部清除-
            // var root = $("#deptTree").tree("getRoot");//获取根节点，如果回显列表为【】 root就一直是null,未测，不懂为啥
            // $("#deptTree").tree("uncheck",root.target);
            $('#deptTree').tree('loadData', []);
            $.post("${request.conteath}/a/syer/dsList?userId=" + id, function (data) {
                console.log("data666:" + JSON.stringify(data))
                //回显
                for (deptTreeId in data) {
                    console.log("deptTreeId:" + deptTreeId)
                    console.log("datalf:" + data[deptTreeId])
                    var node = $("#deptTree").tree("find", data[deptTreeId]);// 后面这个参数就是树的id 不懂可查看easyui官网
                    $("#deptTree").tree("check", node.target);//就是要用target，改成id就不会勾选，不懂为啥，参考官网
                }
            }, 'json');

        }

3保存树

seDatarsion: function (id) {
            $.modalDialog({
                title: '设置',
                href: ctx + "/i/userRole/edDaPms?id=" + id,
                width: 400,
                height: 600,
                onOpen: function () {
                    $.modalDialog.openner_datagrid = useTblSector;//因为添加成功之后，需要刷新这个Grid，所以先预定义好
                },
                buttons: [{
                    text: "保存",
                    iconCls: "fa fa-save",
                    handler: function () {
                        // var chooseDept = $('#deptTree').tree('getChecked');//用这个只获取勾选的树id
                        var chooseDept = $('#deptTree').tree('getChecked', ['checked', 'indeterminate']);//用这个会获取勾选的树id及每一层父树id
                        var dataPmsIds = [];

                        if (!chooseDept || chooseDept.length === 0) {
                            dataPmsIds = [""];//清空
                        } else {
                            for (nid in chooseDept) {
                                dataPmsIds.push(chooseDept[nid].id);
                                // $("#deptTree").tree("check",data[deptTreeId]);//这个不行 无意义
                            }
                        }


                        var param = {
                            userd: id,
                            datss: dataPmsIds
                        };
                        $.post(ctx + '/a/sUer/saetams', param, function (res) {
                            if (0 === res.code) {
                                $.messager.show({
                                    title: '提示',
                                    msg: res.msg
                                });
                                $.modalDialog.handler.dialog('close');
                            } else {
                                $.messager.alert("错误", data.msg, "error");
                            }
                        }, 'json');
                        // $.ajax({//不行的代码，报未收到集合参数
                        //     type: "post",
                        //     dataType: "json",
                        //     contentType: "application/json",
                        //     url: ctx + "/a/sysUr/savtaPs",
                        //     data: JSON.stringify(param),
                        //     beforeSend: function () {
                        //         // 加载遮罩层
                        //         $.messager.progress({
                        //             text: '保存中...'
                        //         });
                        //     },
                        //     success: function (data) {
                        //         if (data.code === 0) {
                        //             userTableSelector.datagrid('reload');
                        //             $.messager.alert("提示", data.msg, "info");
                        //         } else {
                        //             $.messager.alert("错误", data.msg, "error");
                        //         }
                        //         //关闭遮罩层
                        //         $.messager.progress('close');
                        //     }
                        // });
                    }
                }, 

easyui-datagrid

1实现复选框多选，单元格单选。
是否跨页 可参考easyui官网

var isCheckFlag = true;
//以下 3个 onClickCell   onSelect onUnSelect实现复选框多选，单元格单选
            onClickCell: function (rowIndex, field, value) {
                isCheckFlag = false;
            },
            onSelect: function (rowIndex, rowData) {
                if (!isCheckFlag) {
                    $(this).datagrid('unselectAll');//存在多页，只保证当前页有一条被选，其他页也存在一条可被选，就跨页单元格不单选了
                    $(this).datagrid('clearSelections');//所有页中只存在一个单元格被选
                    isCheckFlag = true;
                    $(this).datagrid('selectRow', rowIndex);

                }
                userRoleTableSelector.datagrid('clearChecked');
                userRole.showUserRole(rowIndex, rowData);
            },
            onUnSelect: function (rowIndex, rowData) {
                if (!isCheckFlag) {
                    $(this).datagrid('unselectAll');
                    isCheckFlag = true;
                    $(this).datagrid('unselectRow', rowIndex);

                }
            },

2勾选后，删除参数格式提交给后端

 var chooseUserNum = usTableSeor.datagrid("getChecked");
            if (!chooseUserNum || chooUserNum.length === 0) {
                $.messager.alert("提示", "请勾至少一个用户！", "info");
                return false;
            }
            $.messager.confirm("系统信息", "确定要中得用户吗？", function (r) {
                if (r) {
                    var delUsers = [];
                    for (var i = 0; i < chooseUserNum.length; i++) {
                        delUsers.push(chooseUserNum[i]);
                    }
                    var params = {
                        delUsers: delUsers
                    };
                    $.ajax({
                        type: "post",//不可少，前4个不用变 
                        dataType: "json",//不可少，前4个不用变 
                        contentType: "application/json",//不可少，前4个不用变 
                        url: ctx + "/a/delUser",//不可少，前4个不用变 
                        // data: JSON.stringify(params),//错误示例
                        // data: delUsers,//错误示例
                        data: JSON.stringify(delUsers),//唯一正确示例
                         // 以下没试过行不行哦$.post(ctx + '/a/deUser', delUsers, function (data) {
                    //     if (data.code === 0) {
                    //         userRTleSetor.datagrid('reload');
                    //         $.messager.show({
                    //             title: '提示',
                    //             msg: data.msg
                    //         });
                    //     } else {
                    //         $.messager.alert("错误", data.msg, "error");
                    //     }
                    //     //关闭遮罩层
                    //     $.messager.progress('close');
                    // }, 'json');

其他

1easyui回显方式有好几种 前后端那样///显示树形也有 2种方式 前后端

2同个用户 同个数据库 不同数据库用户登录 是不一样的表哎 神奇/子查询，，，连表查询easy显示分组

3查询参数使用表和不适用表2种子查询 和联表查询

4几种循环方式–前后端 //左连接 ==where + 左表数据 右表为空 的数据连表 和子查询 在于 主表不一样‘ 子查询只能查询出一对一的数据 否则会报错