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

asp.net+jquery+ztree实现树形选择

作者: IT小兵 | 2013年6月26日| 热度:℃ | 评论: |参与:

和大家分享一下,jquery 树形插件Ztree在asp.net下的应用。

介绍:

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

   zTree 是开源免费的软件(MIT 许可证)。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去,可以进行捐助。

zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载

采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀

兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器

支持 JSON 数据

支持静态 和 Ajax 异步加载节点数据

支持任意更换皮肤 / 自定义图标(依靠css)

支持极其灵活的 checkbox 或 radio 选择功能

提供多种事件响应回调

灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟

在一个页面内可同时生成多个 Tree 实例

简单的参数配置实现 灵活多变的功能


1.数据准备

数据使用json传递到js中的,asp.net实现这个有很多种办法。

Ajax(jquery.ajax,或者ajaxpro都可以的)、response返回json、或者用webmethod。

这里用的是AjaxPro。

首先注册页面类: AjaxPro.Utility.RegisterTypeForAjax(typeof(Pages_Scheme_AddScheme));

在调用的后台方法上加上:

[AjaxPro.AjaxMethod]
   public DataTemp GetSendCity(string citylist,string schemeid)
   {
       StringBuilder data = new StringBuilder();
       DataTemp datatmp = new DataTemp();
       datatmp.Arraydata = new List<CustomTreeNode>();
       try
       {
           Kaitone.Model.Scheme.Scheme schemetemp = new Scheme();
           if (schemeid.Length > 0)//业务变更
           {
               schemetemp = schbll.GetSchemeModelByGUID(schemeid);
           }
         
           Kaitone.UI.BLL.SysConfig.City bll = new Kaitone.UI.BLL.SysConfig.City();
           List<Kaitone.Model.City> list = new List<Kaitone.Model.City>();
           list = bll.GetList().CityData;
           StringBuilder sb = new StringBuilder();
           string[] strlist = citylist.Split(';');//这是拆分开的,每一个box对应的位置的guid哦
           List<int> selectcity = schemetemp.SendCityList.Select(a => a.CityID).ToList();
           if (list != null)
           {
               sb.Append("[");//{ id:1, pId:0, name:"随意勾选 父 1", open:true},
               foreach (Kaitone.Model.City pos in list.Where(a => a.ParentID == 0))
               {
                   if (selectcity.Contains(pos.CityID))//包含这个城市了,被选择了。
                   {
                       sb.Append("{id:\"" + pos.CityID.ToString() + "\",pId:0,name:\"" + pos.CityName.ToString() +
                           "\","
                           + GetChildCity(selectcity, true, pos.CityID, list, datatmp) + ", checked:true , font:{'color':'blue'},iconSkin:\"pIcon01\"},");
                       CustomTreeNode onetree = new CustomTreeNode();
                       onetree.id = pos.CityID.ToString();
                       onetree.pId = pos.ParentID.ToString();
                       onetree.name = pos.CityName;
                       datatmp.Arraydata.Add(onetree);
                   }
                   else
                   {
                       sb.Append("{id:\"" + pos.CityID.ToString() + "\",pId:0,name:\"" + pos.CityName.ToString() +
                       "\","
                        + GetChildCity(selectcity, false, pos.CityID, list, datatmp) + ",  font:{'color':'blue'},iconSkin:\"pIcon01\"},");
                   }
               }
               if (sb.Length > 1)
               {
                   sb.Remove(sb.Length - 1, 1);
               }
               sb.Append("]");
               datatmp.TreeData = sb.ToString();
               return datatmp;
           }
           else
           {
               return new DataTemp();
           }
       }
       catch (Exception ex)
       {
           return new DataTemp();
       }
   }
   /// <summary>
   /// 根据位置获取对应的box列表
   /// </summary>
   /// <param name="pos"></param>
   /// <returns></returns>
   public string GetChildCity(List<int>selectcity, bool isparentchecked,int parentid,List<City> Citylist,DataTemp datatemp)
   {
       List<Kaitone.Model.City> list = Citylist.Where(a=>a.ParentID==parentid).ToList();
       StringBuilder sb = new StringBuilder();
       if (list != null)
       {
           sb.Append("childs:[");
           if (list.Count == 0) { return "isParent:true,nocheck:true"; }
           foreach (Kaitone.Model.City city in list)
           {
               if ((selectcity.Contains(city.CityID)  || isparentchecked))
               {
                   sb.Append("{id:\"" + city.CityID.ToString() +
                           "\",pId:\"" + parentid.ToString() + "\",name:\"" + city.CityName
                           + "\", font:{'color':'blue'},checked:true},");
                   CustomTreeNode onetree = new CustomTreeNode();
                   onetree.id = city.CityID.ToString();
                   onetree.pId = city.ParentID.ToString();
                   onetree.name = city.CityName;
                   datatemp.Arraydata.Add(onetree);
               }
               else
               {
                   sb.Append("{id:\"" + city.CityID.ToString() +
                           "\",pId:\"" + parentid.ToString() + "\",name:\"" + city.CityName
                           + "\", font:{'color':'blue'}},");
               }
             
           }
           if (sb.Length > 1)
           {
               sb.Remove(sb.Length - 1, 1);
           }
           sb.Append("]");
           return sb.ToString();
       }
       else
       {
           return "isParent:true,nocheck:true";
       }
   }

DataTemp  是我的自定义类。返回的是一个集合。


2.Jquery循环数据集合,组织数据:

在页面初始化时,进行后台ajax的调用。

$(document).ready(function () {
   $("#imgok").hide(); $("#imgerror").hide(); $("#DivAdd").hide();
//    $('#ctl00_ContentPlaceHolder1_txtBeginTime').daterangepicker({ arrows: true });
   //    $('#ctl00_ContentPlaceHolder1_TxtEndtIme').daterangepicker({ arrows: true });
   _$net("HFRegionHtml").value = escape(_$net("RegionHTML").innerHTML);
   GetSendCity();
});
获取数据:
function GetSendCity() {
   var SchemeID = RequestParam("SchemeID");
   Pages_Scheme_AddScheme.GetSendCity("", SchemeID, CallbackShowCityList);
}

3.绑定Ztree数据:

Callback函数:
function CallbackShowCityList(res) {
   valu = res.value;
   $("#DivGetDataing").hide();
   if (valu != null) {
       zNodes = eval(valu.TreeData);
         
       SelectedPositionList = valu.Arraydata;
       GetHtml();
       aaazTree.init($("#treeDemo"), setting, zNodes);
       $("#checkTrue").bind("click", { type: "checkTrue" }, checkNode);
       $("#checkFalse").bind("click", { type: "checkFalse" }, checkNode);
       $("#checkTruePS").bind("click", { type: "checkTruePS" }, checkNode);
       $("#checkFalsePS").bind("click", { type: "checkFalsePS" }, checkNode);
       $("#checkAllTrue").bind("click", { type: "checkAllTrue" }, checkNode);
       $("#checkAllFalse").bind("click", { type: "checkAllFalse" }, checkNode);
     
   }
   else {
   }
}

整个过程完成。是不是很简单?

Ztree还可以实现单选、多选、右键编辑等很多功能,大家可以到官网上看看。http://www.ztree.me


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

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

给您更多信息和帮助

在这里您可以找到更多:

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

投稿:suchso@vip.qq.com

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

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

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

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

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