Extjs 权限树的实现(下)

承接上文

Extjs 权限树的实现(上)

extjs5

ondd()打开窗口

//添加窗口
onAdd:function(){
    var win = Ext.create("pay.view.roleManager.region.RoleManagerForm");
    win.show();
    Ext.getCmp('btn-roleManager-edit').hide();   //隐藏编辑提交的按钮
},

表单提交

我们在Form内创建了button,绑定了onAdd方法,因此当点击操作栏的添加按钮时,会执行如上方法,然后表单提交的方法如下,我们进行了一定程度的封装:

// 表单提交
onSubmit:function(btn){
        var opr;        //声明操作码
        if(btn.getId() == 'btn-roleManager-add'){
            opr = 'add';
        } else if(btn.getId() == 'btn-roleManager-edit'){
            opr = 'edit';
        }
        var form = btn.up("form").getForm();         //获取form
        //处理权限树开始
        var arr = new Array();      //声明数组来存放权限id
        var tree = Ext.getCmp('auth-list-tree');
        var firstNodes = tree.getRootNode().childNodes;     //客户信息/合同协议号之类
        for(var i=0;i<firstNodes.length;i++){
            var secondNodes = firstNodes[i].childNodes;
            for(var j=0;j<secondNodes.length;j++){
                if(secondNodes[j].data.checked == true){
                    arr.push(secondNodes[j].id);
                }
            }
        }
        if (form.isValid()){
            var values = form.getValues();          //获取form的所有values
            values.opr = opr;                     //接受opr,判断是添加还是编辑
            values.auth_list = arr.join(',');
            Ext.Ajax.request({
                url :ipPort+'/role'+backend,
                withCredentials : true,
                method : 'POST',
                async:false,
                params:{
                    json:Ext.encode(values)
                },
                success:function(response) {
                    var success = Ext.decode(response.responseText).success;
                    if(success == 'true'){
                        toastr.success('提交成功!');
                    } else if(success == 'false'){
                        toastr.error('提交失败,请重试!');
                    }
                },
                failure:function(response) {
                    toastr.error('网络连接错误,请稍后重试!');
                }
            });
            Ext.getCmp('roleManagerForm').close();
            Ext.StoreMgr.get('roleManager').load();
        }
    },

这里讲下逻辑,根据接口,通过opr判断是增加还是编辑操作,所以form内有两个提交按钮,根据ID不同来判断是add或edit,然后设置对应的opr传给后台,其次,通过如下方法获取form值

var form = btn.up("form").getForm();         //获取form
var values = form.getValues();

然后主要问题就是获取已选择的树的结点ID,方法如下:

我们新建一个arr数组来存放已勾选的结点的ID,然后编辑整棵树,由于我们这个只有两层(不包括root),所以只有两层循环,多层需要递归

//处理权限树开始
        var arr = new Array();      //声明数组来存放权限id
        var tree = Ext.getCmp('auth-list-tree');
        var firstNodes = tree.getRootNode().childNodes;     //客户信息/合同协议号之类
        for(var i=0;i<firstNodes.length;i++){
            var secondNodes = firstNodes[i].childNodes;
            for(var j=0;j<secondNodes.length;j++){
                if(secondNodes[j].data.checked == true){    //如果当前节点的checked属性为true,则把结点idpush到新数组,完成了一个结点的选择操作
                    arr.push(secondNodes[j].id);
                }
            }
        }

这样就能实现添加操作

表单编辑赋值

编辑赋值代码如下:

这里出现了一个问题,就是编辑时想通过id来找到相应的节点并让其改为被勾选状态,但是childNode始终是空,我认为是树没有完全加载好,所以赋值不进去,因为我测试过,在form内通过一个测试按钮来给树赋值,这样就可以,所以这里取了个巧,就是窗口打开后设置一个定时器,100ms后执行测试按钮的点击事件(执行给权限树赋值的方法),这样才算解决了这个棘手的问题,有其他办法可以在楼下回复,我也是一点一点摸索过来的,此方法不正统!然后编辑提交和添加提交一样的方法。

//编辑窗口
    onEdit:function(){
        var win,form;
        var record = this.getView().getSelectionModel().getSelection();
        win = Ext.create("pay.view.roleManager.region.RoleManagerForm");
        win.show();
        Ext.getCmp('btn-roleManager-add').hide();        //隐藏添加提交的按钮
        if (record.length != 1) {
            if(record.length == 0){
                Ext.Msg.alert('提示','请至少选择一条记录!');
            } else{
                Ext.Msg.alert('提示','单次只能编辑一条记录!');
            }
            return;
        } else {
            form = win.down('form').getForm();
            form.findField('id').setDisabled(false);  //由于添加时禁用了id的输入框(否则id在添加时会传给后台,没必要),所以这里需要使用ID的输入框
            form.loadRecord(record[0]);    //这一句主要将表格选中行的record  load到form内,只要form表单的name和view内的dataInde相同(一定要相同)
            //处理权限树开始
            setTimeout("Ext.getCmp('btn-roleManager-setTreeValue').fireEvent('click')",100);
        }
    },

删除操作

感觉挺容易看懂,就是获取到已选择行的id,传给ajax就行了

//删除
    onDelete:function() {
        var data = this.getView().getSelectionModel().getSelection();
        if (data.length == 0) {
            Ext.Msg.alert('提示','请至少选择一条要删除的数据!');
            return;
        } else {
            Ext.Msg.confirm("提示", "是否真的要删除数据?", function(button, text) {
                if (button == "yes") {
                    var ids = []; //声明一个数组存放待删除的内容的主键
                    Ext.Array.each(data, function(record) {
                        var id = record.get('id');      //此处id是主键,不一定专指id
                        //如果选中行存在
                        if(id){
                            ids.push(parseInt(id));
                        }
                    });
                    Ext.Ajax.request({
                        url : ipPort+'/role'+backend,
                        params:{json:Ext.encode({
                            "opr":"delete",
                            "ids" : ids
                        })},
                        method : 'POST',
                        success : function(response, opts) {
                            var success = Ext.decode(response.responseText).success;
                            if (success == 'true') {
                                toastr.success('删除成功!');
                            }
                            else if(success == 'false'){
                                toastr.error('删除失败!');
                            }
                        },
                        failure: function () {
                            toastr.error('网络连接错误,请稍后重试!');
                        }
                    });
                    Ext.StoreMgr.get('roleManager').load();
                }
            });

        }
    },

查询和重置

这里封装了一下,查询也是获取form值然后传给ajax,并重新load store,重置就是在reset表单的同时让grid也回到初始状态

onSearch:function(btn){
        var data = new Object();
        var form = btn.up("form").getForm();     //获取form
        var values = form.getValues();          //获取form的所有values
        data.opr = 'select';
        if(btn.getId() == 'btn-roleManager-reset'){
            form.reset();
            data.cond = {};
        } else{
            data.cond = values;
        }
        Ext.StoreMgr.get('roleManager').on('beforeload', function() {
            Ext.StoreMgr.get('roleManager').proxy.extraParams = {
                json:Ext.encode(data)
            }
        });
        Ext.StoreMgr.get('roleManager').load({
            params : {
                page : 1,
                start: 0,
                limit: 30
            }
        });
    },

最后讲一下父子节点的级联满足如下条件:

1:如果勾选了父级,那子集也全部勾选

2:如果子集全部勾选,父级才勾选

3:子集有一个没勾选,父级都不能勾选

代码写在form那个文件内,我提出来说,checkchange是一个绑定事件,

//这个方法是别人的,我本以为网上直接有,但是没找到,无奈只有自己写了
function checkChildNode(node, checked) {
	if (!node) return;
	node.set('checked', checked);
	node.eachChild(function (child) {
		checkChildNode(child, checked);
	});
}

listeners: {
                    "checkchange": function(node,checked) {
                        checkChildNode(node, checked);
                        if(!node.hasChildNodes()){
                            //如果有一个取消选中,父节点也取消选中
                            if(!checked){
                                node.parentNode.set('checked',false);
                            }
                            //如果所有子节点都选中,父节点才选中
                            else{
                                var child = node.parentNode.childNodes;
                                var flag = true;
                                for(var i=0;i<child.length;i++){
                                    if(child[i].data.checked == false){
                                        flag = false;
                                    }
                                }
                                if(flag == true){
                                    node.parentNode.set('checked',true);
                                }
                            }
                        }
                    }
                }

总的来说,功能实现了了,代码也没有太多的冗余,有任何问题请下方留言

 

共有 1 条评论

Top