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 的详细说明

初始化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);
    }
    
}
时间： 2024-10-02 00:53:32

ztree checkbox使用和修改样式的例子的相关文章

纯CSS设置Checkbox复选框控件的样式的例子

Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框. 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一段代码到你的CSS文件中. /**  * 隐藏默认的checkbox  */ input[type

js/jquery 批量修改样式

问题描述 js/jquery 批量修改样式 <div><p id="1">aa</p></div> <div><p id="2">aa</p></div> <div><p id="32">aa</p></div> <div><p id="44">aa</p

Word入门动画教程144：修改样式

修改样式的方法与创建样式稍有不同,可按如下步骤进行: 1.执行"格式"→"样式和格式"(或单击"格式"工具栏上 的"格式创格"按钮),显示"样式和格式"任务窗格. 2.在底部的"显示"列表框中,选择要修改的样式所属的类型,有"使用中的样式 "."所有样式"."有效样式"三种. 3.在"请选择要应用的格式"框中

CSS定义Radio单选项和Checkbox复选框样式有效代码

 我们都知道一般情况利用css来定义Radio单选项和Checkbox复选框样式是无效的,下面我来给大家介绍利用CSS定义Radio单选项和Checkbox复选框样式,有需要了解的朋友可参考. 完全使用css来实例 代码如下: <style type="text/css"> form#form1 {font:12px tahoma,sans-serif} input[type="checkbox"] {visibility:hidden;width:0;

jQuery实现鼠标划过修改样式的方法

 本文实例讲述了jQuery实现鼠标划过修改样式的方法.分享给大家供大家参考.具体如下: 1 2 3 4 5 6 7 8 9 10 11 12 $(document).ready(function () { //默认情况下样式 $("input:text").attr("style","border:1px solid #7E9DB9;"); //鼠标移入样式 $("input:text").mouseover(functio

论checkbox和radio的样式美化问题

原文:论checkbox和radio的样式美化问题 如果你下定决心要改变现有的默认的checkbox和radio的样式,那么我目前有两种办法: 1.自己动手写一个,也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉,使用绝对定位的方式,手动切换checked和unchecked的图片,定位到原来input显示的地方: 2.使用jQuery的iCheck插件 .      中文DOC地址:http://www.bootcss.com/p/icheck/      git

javascript-js 嵌套循环问题 修改样式

问题描述 js 嵌套循环问题 修改样式 <div><p id=""1"">aa</p></div> <div><p id=""2"">aa</p></div> <div><p id=""32"">aa</p></div> <div>&

jQuery实现鼠标划过修改样式的方法_jquery

本文实例讲述了jQuery实现鼠标划过修改样式的方法.分享给大家供大家参考.具体如下: $(document).ready(function () { //默认情况下样式 $("input:text").attr("style","border:1px solid #7E9DB9;"); //鼠标移入样式 $("input:text").mouseover(function () { $(this).attr("st

javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式

原文:javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式 一.背景:一个表单中,要修改一些li中有class=box的样式,将它的background设置为red红色.一般的做法是我们可以先找到父级元素 ,然后由父级元素找到所有相关tagName,最后,来一个if判断,如果class属性为box,则修改之  var oUl = document.getElementById("ul1");