easyui Combotree 怎么加载数据支持多选

1、开发环境vs2012 mvc4 c#

2、HTML前端代码

<%@ 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>

3、后台代码

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

4、项目结构

5、tree_data4.json

[
{
"id":1,
"text":"土地"
},
{
"id":2,
"text":"资金"
},
{
"id":3,
"text":"水电"
},
{
"id":4,
"text":"基础设施"
},
{
"id":5,
"text":"手续审批"
},
{
"id":6,
"text":"市场"
},
{
"id":7,
"text":"招工"
}

]

6、kzEasyuiCombotree.js

(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为空，则获取当前选中的nodevar 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);