现在位置首页 / 项目实战 /正文

Ztree教程-mvc实现checkbox、全选功能代码实例下载

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

前几天分享了一个asp.net的ztree代码实例。参考:[Ztree教程-asp.net下代码部署及服务端获取数据的例子].

今天分享一个ztree用mvc实现的代码例子,并提供代码下载哦。

直接下载demo:

链接:http://pan.baidu.com/s/1i3BmLnB    密码:rbg7 

实现功能:

1、mvc实现,异步ajax获取服务端数据。

2、ztree checkbox选择。支持全选 和取消全选

代码结构:

1、是样式和图片

2、数据获取接口

3、ztree实体

4、ztree页面

html代码:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
       <script src="~/Scripts/jquery-1.4.4.min.js"></script>
   
    <link href="~/Content/demo.css" rel="stylesheet" />
    
    <link href="~/Content/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script src="~/Scripts/jquery.ztree.core-3.5.min.js"></script>
    <script src="~/Scripts/jquery.ztree.exedit-3.5.js"></script>
    <script src="~/Scripts/jquery.ztree.excheck-3.5.min.js"></script>
    <SCRIPT type="text/javascript">
		<!--
    var setting = {
        check: {
            enable: true
        },
        
        //chkboxType: { "Y": "ps", "N": "ps" },//默认这个
        data: {
            simpleData: {
                enable: true,
                idKey: "id", // id编号命名   
                pIdKey: "pId", // 父id编号命名    
                rootPId: 0
            }
        },
        async: {
            enable: true,
            url: "/Home/TreeData",
            autoParam: ["id", "name"]
        }
    };
  
    function checkNode(e) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			type = e.data.type,
			nodes = zTree.getSelectedNodes();
        if (type.indexOf("All") < 0 && nodes.length == 0) {
            alert("请先选择一个节点");
        }
        if (type == "checkAllTrue") {
            zTree.checkAllNodes(true);
        } else if (type == "checkAllFalse") {
            zTree.checkAllNodes(false);
        }
    }
    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting);
       
        $("#checkAllTrue").bind("click", { type: "checkAllTrue" }, checkNode);
        $("#checkAllFalse").bind("click", { type: "checkAllFalse" }, checkNode);
    });
    //-->
	</SCRIPT>      
</head>
<body>
  
	<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
        <a id="checkAllTrue" href="#" title="不管你有多NB,统统都要听我的!!" onclick="return false;">勾选</a> 
					&nbsp;&nbsp;&nbsp;&nbsp; <a id="checkAllFalse" href="#" title="不管你有多NB,统统都要听我的!!" onclick="return false;">取消勾选</a> 
	</div>	
</div>
</body>
</html>

HomeController处理数据:

        public string TreeData(string id="0")
        {
            List<ZTreeNode> lstModel = new List<ZTreeNode>();
            lstModel.AddRange(new List<ZTreeNode> { 
                new ZTreeNode{id ="1",pId="0",name = "山西省"},
                new ZTreeNode{id ="2",pId="0",name = "河北省"},
                new ZTreeNode{id ="3",pId="0",name = "内蒙省"},
                new ZTreeNode{id ="4",pId="0",name = "吉林省"},
                new ZTreeNode{id ="11",pId="1",name = "大同市"},
                new ZTreeNode{id ="12",pId="1",name = "朔州市"},
                new ZTreeNode{id ="31",pId="3",name = "赤峰市"},
                new ZTreeNode{id ="32",pId="3",name = "呼市"},
                new ZTreeNode{id ="111",pId="11",name = "浑源县"},
                new ZTreeNode{id ="112",pId="11",name = "阳高县"},
            });
            JavaScriptSerializer jss = new JavaScriptSerializer();
            string ResultDt = jss.Serialize(lstModel);
            return ResultDt; 
        }

ztree C#实体:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace EasyUiTree.Models
{
    public class ZTreeNode
    {
        public string id { get; set; }
        public string pId { get; set; }
        public string name { get; set; }
        public string url { get; set; }
        public string target { get; set; }
    }
}


转发注明:IT分享  http://www.suchso.com 

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

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

给您更多信息和帮助

在这里您可以找到更多:

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

投稿:suchso@vip.qq.com

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

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

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

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

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