现在位置首页 / 前端开发 /正文

ztree checkbox使用和修改样式

作者: IT小兵 | 2016年5月23日| 热度:℃ | 评论: |参与:

本站分享了很多ztree的文章了,但是还是很有同学问我问题。其中,关于ztree事件的特别多,其中ztree 的checkbox怎么选中,怎么获取值更多一些。

今天就说说ztree checkbox使用和修改样式 这些事。

官方的例子比较简单:

但是已经很全面了。要想使用checkbox,需要在:

1、setting 配置信息说明:


    • setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };

    • 使用 checkbox,必须设置 setting.check 中的各个属性,详细请参见 API 文档中的相关内容

    • 父子关联关系:
      被勾选时:关联父 关联子
      取消勾选时:关联父 关联子

       

      2、treeNode 节点数据说明

    • 1)、如果需要初始化默认节点被勾选,请设置 treeNode.checked 属性,详细请参见 API 文档中的相关内容

    • 2)、如果某节点禁用 checkbox,请设置 treeNode.chkDisabled 属性,详细请参见 API 文档中的相关内容 和 'chkDisabled 演示'

    • 3)、如果某节点不显示 checkbox,请设置 treeNode.nocheck 属性,详细请参见 API 文档中的相关内容 和 'nocheck 演示'

    • 4)、如果更换 checked 属性,请参考 API 文档中 setting.data.key.checked 的详细说明

    • 5)、其他请参考 API 文档中 treeNode.checkedOld / getCheckStatus / check_Child_State / check_Focus 的详细说明

demo代码:

初始化ztree

var setting = {
    check: {
        enable: true
//        chkboxType : { "Y" : "", "N" : "" }
    },
    data: {
        simpleData: {
            enable: true
        }
    }
};
    function createTree () {
        var zNodes;
        $.ajax({
            url: 'Handler.ashx?action=GetModule', //url  action是方法的名称
            data: { id: "11" },
            type: 'POST',
            dataType: "text", //可以是text,如果用text,返回的结果为字符串;如果需要json格式的,可是设置为json
            ContentType: "application/json; charset=utf-8",
            success: function (data) {
                zNodes = data;
                
                $.fn.zTree.init($("#treeDemo"), setting, eval('(' + zNodes + ')'));
            },
            error: function (msg) {
                alert("失败");
            }
        });
    }
   
    function Add() {
    }
    function AddChild() {
    }
    function Update() {
    }
    function Delete() {
    }
    function DeleteAll() {
    }
    $(document).ready(function () {
        createTree();
        $("#btn_GetCheckedAll").click(GetCheckedAll);
        $("#btn_CheckAllNodes").click(CheckAllNodes);
        $("#btn_CancelAllNodes").click(CancelAllNodes);
        $("#btn_AssignCheck").click(AssignCheck);
        $("#btn_Disabled1").click(Disabled1);
        $("#btn_Disabled2").click(Disabled2);
        $("#btn_Add").click(Add);
        $("#btn_AddChild").click(AddChild);
        $("#btn_Update").click(Update);
        $("#btn_Delete").click(Delete);
        $("#btn_DeleteAll").click(DeleteAll);
        
        
        //$.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });

checkbox事件

 //获取所有选中节点的值
    function GetCheckedAll() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getCheckedNodes(true);
        var msg = "name--id--pid\n";
        for (var i = 0; i < nodes.length; i++) {
            msg += nodes[i].name+"--"+nodes[i].id+"--"+nodes[i].pId+"\n";
        }
        $("#msg").val();
        $("#msg").val(msg);
    }    
    
    //全选
    function CheckAllNodes() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        treeObj.checkAllNodes(true);
    }
    //全取消
    function CancelAllNodes() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        treeObj.checkAllNodes(false);
    }
    
    //选中指定的节点
    function AssignCheck() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
//        var nodes = treeObj.getNodes();
        treeObj.checkNode(treeObj.getNodeByParam("id", "000100010002", null), true, true);
        treeObj.checkNode(treeObj.getNodeByParam("id", "0001000100010001000100010001", null), true, true);
    }
    //禁用、解禁选中节点
    function Disabled1() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getCheckedNodes();
        for (var i = 0; i < nodes.length; i++) {
            treeObj.setChkDisabled(nodes[i], true);
        }
    }
    function Disabled2() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getCheckedNodes();
        for (var i = 0; i < nodes.length; i++) {
            treeObj.setChkDisabled(nodes[i], false);
        }
    }


当然,checkbox的样式可能比较丑,大家要想自己加选择怎么办?那就去掉checkbox!然后自己在每个node节点上加上自定义函数进行处理:


我们在使用zTree的时候需要下载ztree的几个js文件,我们可以在jquery.ztree.core-3.5.js中去实现。

在jquery.ztree.core-3.5.js中有个_setting的初始化代码,显示属性的初始化还有事件的初始化等等,如下图:

这是下拉列表的点击事件,我们写上自己的事件。

请看下面的代码:

var value="";    //文本框中显示的值    例:张三,李四,王五
var pIndex="";    //选择值得id    例:1,2,3
var selectCount=false;   //表示是否为第一次选择     用于清除拼接的逗号
function OnListClick(event, treeId, treeNode, clickFlag) {
    if (treeNode.isParent) {
        return;
    }
    value+=","+treeNode.name;
    pIndex+=","+treeNode.id;
    if(selectCount==false){     //这里清除第一个逗号
        value=value.substr(1,value.length);
        pIndex=pIndex.substr(1,pIndex.length);
        selectCount=true;
    }
    var valueObj="";
    var pIndexObj="";
    if(treeId=="personTree1"){      
        $("#div1personTree1").css("display","none");
        $("#txtChargePerson").attr("value", treeNode.name);
        $("#txtHiddenPerson").attr("value", treeNode.id);
    }else if(treeId=="personTree2"){
        valueObj=$("#txtChargePersonS");
        pIndexObj=$("#txtHiddenSPerson");
        valueObj.attr("value", value);    //选择多项的时候拼接的值
        pIndexObj.attr("value",pIndex);//选择多项的时候拼接的id
    }else if(treeId=="personTree3"){
        $("#div3personTree3").css("display","none");
        $("#txtChargePersonItem").attr("value", treeNode.name);
        $("#txtHiddenCPerson").attr("value", treeNode.id);
    }else if(treeId=="personTree4"){
        valueObj=$("#txtExaminePerson");
        pIndexObj=$("#txtHiddenEPerson");
        valueObj.attr("value", value);
        pIndexObj.attr("value",pIndex);
    }else if(treeId=="personTree5"){
        valueObj=$("#txtDesignPerson");
        pIndexObj=$("#txtHiddenDPerson");
        valueObj.attr("value", value);
        pIndexObj.attr("value",pIndex);
    }
    
}


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询