easyui Combotree 怎麼加載數據支持多選

時間 2019-12-02

標籤 easyui combotree 怎麼加載數據支持简体版

原文原文鏈接

一、開發環境vs2012 mvc4 c#javascript

二、HTML前端代碼css

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataGridTest.aspx.cs" Inherits="MvcAppTest.DataGridTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="Easyui/themes/default/easyui.css" rel="stylesheet" />
    <script src="Easyui/jquery-1.7.2.min.js"></script>
    <script src="Easyui/jquery.easyui.min.js"></script>
    <script src="Easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="IndusJS/kzEasyuiCombotree.js"></script>
    <style type="text/css">
           /*.datagrid-btable .datagrid-cell{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;} .datagrid-header {position: absolute; visibility: hidden;}*/
    </style>
    <script type="text/javascript">

        var $winPro; $(function () { showProTree(); $winPro = $('#test-windowPro').window({ title: '企業存在困難', width: 400, height: 300, shadow: true, modal: true, iconCls: 'icon-add', closed: true, minimizable: false, maximizable: false, collapsible: false, buttons: [{ text: '添加', handler: function () { } }] }); }); function showProTree() { $("#IDPro").combotree({ url: 'Home/HandlerProblemFromFile', valueField: 'id', textField: 'text', width: 250, multiple: true, //這個選項設置多選功能
 onClick: function (node) { }, panelHeight: 300, editable: true, onLoadSuccess: function (node, data) { $(this).tree('collapseAll'); //關閉樹節點
                    var root = $(this).tree("getRoot"); //展開根節點
                    if (root != null) { $(this).tree("expand", root.target); var childrens = $(this).tree("getChildren", root.target); for (var i = 0; i < childrens.length; i++) { if (childrens[i].id == '0') { $(this).tree("expand", childrens[i].target); } } } } }); $(".combo-text").bind("input propertychange", function () { $('#IDPro').combotree('tree').tree("search", $(this).val()); if ($(this).val() == "" || null == $(this).val()) { $('#IDPro').combotree('tree').tree("expandAll"); } }); } function testPro() { var tree = $('#IDPro').combotree('tree'); //獲取當前選中的節點
            var data = tree.tree('getChecked'); if (data) { if (data.length > 0) { var str = new Array(); for (var i = 0; i < data.length; i++) { str.push(data[i].text); } var myStr = str.join(','); $('#PROBLEMITEM').val(myStr); $winPro.window('close'); } } } function testPro01() { $winPro.window('close'); } function SelectPro() { $winPro.window('open'); } </script>
</head>
<body>
    <div>
        <table id="wg"></table>
    </div>
    <br />
    <input type="text" id="PROBLEMITEM" value="" /> &nbsp;&nbsp; 
    <input style="width:100px;height:31px;" type="button" value="選擇" onclick="SelectPro()" />
                      <div id="test-windowPro" class="easyui-window" title="Login" style="width: 600px; height: 450px;">
    <div style="padding:10px 0px 0px 20px;"> 
      <input id="IDPro" value="" />
   </div>
   <div style="margin-top:15px;text-align:center;"><input type="button" style="width:100px;" onclick="testPro()" value="選擇" />&nbsp;&nbsp;&nbsp;<input type="button" style="width:100px;" onclick="testPro01()" value="取消" /></div>
</div>
</body>
</html>

三、後臺代碼html

   public ActionResult HandlerProblemFromFile() { string path = Server.MapPath("~/loaclData/tree_data4.json"); return File(path, "application/json"); }

四、項目結構前端

五、tree_data4.jsonjava

[
{
"id":1,
"text":"土地"
},
{
"id":2,
"text":"資金"
},
{
"id":3,
"text":"水電"
},
{
"id":4,
"text":"基礎設施"
},
{
"id":5,
"text":"手續審批"
},
{
"id":6,
"text":"市場"
},
{
"id":7,
"text":"招工"
}node

]jquery

六、kzEasyuiCombotree.jsjson

(function ($) { //擴展combotree搜索功能
 $.extend($.fn.tree.methods, { search: function (jqTree, searchText) { // easyui tree的tree對象。能夠經過tree.methodName(jqTree)方式調用easyui tree的方法
            var tree = this; // 獲取全部的樹節點
            var nodeList = getAllNodes(jqTree, tree); // 若是沒有搜索條件，則展現全部樹節點
            searchText = $.trim(searchText); console.log(searchText); if (searchText == "") { console.log('控制'); for (var i = 0; i < nodeList.length; i++) { $(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted"); $(nodeList[i].target).show(); } // 展開已選擇的節點（若是以前選擇了）
                var selectedNode = tree.getSelected(jqTree); if (selectedNode) { tree.expandTo(jqTree, selectedNode.target); } return; } // 搜索匹配的節點並高亮顯示
            var matchedNodeList = []; if (nodeList && nodeList.length > 0) { var node = null; for (var i = 0; i < nodeList.length; i++) { node = nodeList[i]; if (isMatch(searchText, node.text)) { matchedNodeList.push(node); } } // 隱藏全部節點
                for (var i = 0; i < nodeList.length; i++) { $(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted"); $(nodeList[i].target).hide(); } // 摺疊全部節點
 tree.collapseAll(jqTree); // 展現全部匹配的節點以及父節點
                for (var i = 0; i < matchedNodeList.length; i++) { showMatchedNode(jqTree, tree, matchedNodeList[i]); } } }, showChildren: function (jqTree, node) { // easyui tree的tree對象。能夠經過tree.methodName(jqTree)方式調用easyui tree的方法
            var tree = this; // 展現子節點
            if (!tree.isLeaf(jqTree, node.target)) { var children = tree.getChildren(jqTree, node.target); if (children && children.length > 0) { for (var i = 0; i < nodeList.length; i++) { if ($(children[i].target).is(":hidden")) { $(children[i].target).show(); } } } } }, scrollTo: function (jqTree, param) { // easyui tree的tree對象。能夠經過tree.methodName(jqTree)方式調用easyui tree的方法
            var tree = this; // 若是node爲空，則獲取當前選中的node
            var targetNode = param && param.targetNode ? param.targetNode : tree.getSelected(jqTree); if (targetNode != null) { // 判斷節點是否在可視區域
                var root = tree.getRoot(jqTree); var $targetNode = $(targetNode.target); var container = param && param.treeContainer ? param.treeContainer : jqTree.parent(); var containerH = container.height(); var nodeOffsetHeight = $targetNode.offset().top - container.offset().top; if (nodeOffsetHeight > (containerH - 30)) { var scrollHeight = container.scrollTop() + nodeOffsetHeight - containerH + 30; container.scrollTop(scrollHeight); } } } }); function showMatchedNode(jqTree, tree, node) { // 展現全部父節點
 $(node.target).show(); $(".tree-title", node.target).addClass("tree-node-targeted"); var pNode = node; while ((pNode = tree.getParent(jqTree, pNode.target))) { $(pNode.target).show(); } // 展開到該節點
 tree.expandTo(jqTree, node.target); // 若是是非葉子節點，需摺疊該節點的全部子節點
        if (!tree.isLeaf(jqTree, node.target)) { tree.collapse(jqTree, node.target); } } function isMatch(searchText, targetText) { return $.trim(targetText) != "" && targetText.indexOf(searchText) != -1; } function getAllNodes(jqTree, tree) { var allNodeList = jqTree.data("allNodeList"); if (!allNodeList) { var roots = tree.getRoots(jqTree); allNodeList = getChildNodeList(jqTree, tree, roots); jqTree.data("allNodeList", allNodeList); } return allNodeList; } function getChildNodeList(jqTree, tree, nodes) { var childNodeList = []; if (nodes && nodes.length > 0) { var node = null; for (var i = 0; i < nodes.length; i++) { node = nodes[i]; childNodeList.push(node); if (!tree.isLeaf(jqTree, node.target)) { var children = tree.getChildren(jqTree, node.target); childNodeList = childNodeList.concat(getChildNodeList(jqTree, tree, children)); } } } return childNodeList; } })(jQuery);