easyui Combotree 怎麼載入資料 支援多選
阿新 • • 發佈：2019-01-14
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"
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為空，則獲取當前選中的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);
7、easyUI引用檔案
連結：https://pan.baidu.com/s/1KxL2QeVEbEVHU9UxV6LBWw
提取碼：cwbd