软件开发框架Tree树组件的应用讲解

软件开发框架Tree树组件的应用讲解,在开发过程中组织类、配置类等应用场景页面上经常会用到树形控件,软件开发框架也提供tree的控件-JSTree。

初始化

软件开发框架Tree树图

如上图软件开发框架中的tree树样子,我们怎么来做出自己的这种树呢,第一步就是先把相关的javascript引进工程:

1、jstree.js 下载地址:https://www.jstree.com/
2、当然,jstree.js的使用肯定是离不开jquery.js的。不过下载好的包里是包含了jquery.js的。
3、框架自带的js组件:checkboxTree.js,带复选框操作。

制作步骤

总体制作分一下几步进行:

1、前端div加:
        <div id="指标显示配置" class="panel-body in collapse">
            <div id="configTree"></div>
        </div>
2、js脚本赋值给树:
        var treeid = "configTree";
        var jtcontent=@Html.Raw(Model.PromptText);
        showCheckboxTree('@Url.Action("GetUserList")', treeid, jtcontent);
3、js脚本从树取值:
            var treeid = "configTree";
            jQuery("#" + treeid).jstree("open_all");
            var params = $("#main-form").serializeJSON();

            var jtcontent=getCheckboxTreeSelNode(treeid);
            params.PromptText=JSON.stringify(jtcontent);
   
4、模型中
        public string PromptText{ get; set; }
5、TreeCheckedJson json格式为[]中带树节点的标识符。

6、后台组装json数据并且传给前端,两部分数据:整个树的基础数据和初始勾选中的数据。

案例说明

1、 <div id="configTree"></div>为tree树声明一块div区块空间,注意id值在js中会用。

2、脚本绑定值给树并且初始化勾选上的值:showCheckboxTree函数就是干这个的,该函数在如软件开发框架checkboxTree.js中,该函数主要有url、id和checkid三个参数,url是从后台获取数的基础数据,id指的是上面第一点div里面的id值,checkid指的是待勾选的节点标识值,函数原型代码如下:

/**带checkbox的树形控件使用说明
**@url:此url应该返回一个json串,用于生成树
**@id: 将树渲染到页面的某个div上,此div的id
**@checkId:需要默认勾选的数节点id;1.checkId="all",表示勾选所有节点 2.checkId=[1,2]表示勾选id为1,2的节点
**节点的id号由url传入json串中的id决定
*/
function showCheckboxTree(url,id,checkId){
    treeid = id;
    menuTree = jQuery("#"+id).bind("loaded.jstree",function(e,data){
        jQuery("#"+id).jstree("open_all"); 
        jQuery("#"+id).find("li").each(function(){  
            if(checkId == 'all'){
                jQuery("#"+id).jstree("check_node",jQuery(this));
            }else if(checkId instanceof Array){
                for(var i=0;i<checkId.length;i++){
                    if(jQuery(this).attr("id") == checkId[i]){
                      jQuery("#"+id).jstree("check_node",jQuery(this));
                    }
                }
            }
        });
    }).jstree({
        "core" : {
        "data":{
            "url":url,
            "dataType":"json",
            "cache":false
        },
        "attr":{
            "class":"jstree-checked"
        }
      },
      "types" : {
        "default" : {
          "valid_children" : ["default","file"]
        },
        "file" : {
          "icon" : "glyphicon glyphicon-file",
          "valid_children" : []
        }
      },
      "checkbox" : {
          "keep_selected_style" : false,
          "real_checkboxes" : true
      },
      "plugins" : [
        "contextmenu", "dnd", "search",
        "types", "wholerow","checkbox"
      ],
      "contextmenu":{
        "items":{
            "create":null,
            "rename":null,
            "remove":null,
            "ccp":null
        }
      }
    });
}

该案例中从后台获取的checkid值为:["qjopvnrdamzlynet","zlynet","zlynet1",.....]

3、脚本获取勾选值传到后台,案例代码如下,主要是用getCheckboxTreeSelNode函数,函数在checkboxTree.js脚本中,代码很简单不贴出来了,请去看软件开发框架里面的:

 var jtcontent=getCheckboxTreeSelNode(treeid);
 params.PromptText=JSON.stringify(jtcontent);

4、后台树基本数据组建:

        public ActionResult GetUserList()
        {
            IList<JTreeConfigViewModel> jtreeConfigViewModelList = TargetKeyValue();
            return Json(jtreeConfigViewModelList, JsonRequestBehavior.AllowGet);
        }

关键的JTreeConfigViewModel模型,如下代码,id为节点唯一标识,text为节点显示的文本,里面包含一个孩子属性IList,对的,这个是孩子节点的值。

    public partial class JTreeConfigViewModel
    {
        public string id { get; set; }
        public string text { get; set; }
        public IList<JTreeConfigViewModel> children{ get; set; } 
    }

软件开发框架Tree树图举例

页签:JSTree 树形控件 tree控件

标签: 快速开发平台组件插件

网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:软件开发框架 » 软件开发框架Tree树组件的应用讲解
本文标题:软件开发框架Tree树组件的应用讲解
本文地址:https://www.hocode.com/OrgTec/Plugin/0036.html

相关文章: Web框架UI系列—平台四种组件类控件一

电话
电话 18718672256

扫一扫
二维码