easyui Combotree 怎么加载数据 支持多选
生活随笔
收集整理的這篇文章主要介紹了
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="" /> <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="選擇" /> <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);7、easyUI引用文件
鏈接：https://pan.baidu.com/s/1KxL2QeVEbEVHU9UxV6LBWw
提取碼：cwbd
轉載于:https://www.cnblogs.com/net064/p/10265371.html
總結
以上是生活随笔為你收集整理的easyui Combotree 怎么加载数据 支持多选的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux下音频剪辑软件,音频剪辑软件哪
- 下一篇： 第六章 jQuery选择器