jsTree +asp.net树形结构,取值、赋值、全选

来源：互联网发布：顺治多尔衮知乎编辑：程序博客网时间：2024/05/29 19:00

先上图看看效果：

比.net自带的样式好看多咯，jstree的源码在这里下载：https://www.jstree.com/

aspx页面代码：

        <div id="container">           <ul>               <li data-jstree='{"opened":true}'>宿城公安分局                    <asp:Literal ID="ltBox" runat="server"></asp:Literal>               </li>            </ul>        </div>

cs文件代码：

    private void BindChild(string pid)    {        DataTable dt = new dJwh().GetList(" pid='"+ pid + "'").Tables[0];        ltBox.Text += "<ul>";        for (int i = 0; i < dt.Rows.Count; i++)        {            ltBox.Text += "<li data-jstree='{\"opened\":true";//这里是设置展开            DataTable dtSet = new dBranchJwh().GetList("branchID="+ hdbid.Value + " and jwhID='"+ dt.Rows[i]["ID"].ToString() + "'").Tables[0];            if (dtSet.Rows.Count > 0)            {                ltBox.Text += ",\"selected\":true";//这里是设置是否选中的状态            }            ltBox.Text += "}' id=\"" + dt.Rows[i]["ID"].ToString() + "\">" + dt.Rows[i]["Name"].ToString();            BindChild(dt.Rows[i]["ID"].ToString());            ltBox.Text += "</li> ";        }        ltBox.Text += "</ul>";    }

设置展开、选中的标准代码：

<li data-jstree='{ "selected" : true, "opened" : true }'>Root node

获取选中的值：

        $(function () {            $('#container').jstree({                "checkbox": {                    "keep_selected_style": false                },                "plugins": [ "checkbox"]//插件，需要checkbox            });            $('#container').on("changed.jstree", function (e, data) {                var count = data.instance.get_selected(true).length;                var tmp = "";                for (var i = 0; i < count; i++) {                    console.log(data.instance.get_selected(true)[i].id);                    tmp += data.instance.get_selected(true)[i].id + ",";                }                $("#hdSelect").val(tmp);//隐藏域，保存当前所选的值            });        });

选择的值已经取到了，下边用jq异步传数据就行了，页面提交也能。

注意：

当某个节点下边的子节点都选中时，当前节点也会被选中的，是否需要保存当前节点的id，根据自己的项目需求酌情操作。

参考网站：

https://www.jstree.com/docs/config/

http://blog.csdn.net/qq_24472595/article/details/70053863#jstree-API

阅读全文

1 0