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);

7、easyUI引用文件

链接：https://pan.baidu.com/s/1KxL2QeVEbEVHU9UxV6LBWw
提取码：cwbd

转载于:https://www.cnblogs.com/net064/p/10265371.html

easyui Combotree 怎么加载数据支持多选相关推荐

easyui datatable ajax 加载数据,ASP.NET easyUI--datagrid 通过ajax请求ASP.NET后台数据的分页查询...
js前台对datagrid的定义代码,如下 mygrid = $('#mytable').datagrid({ fit: true, //自动大小 height: 'auto', rownumbers ...
easyUI tree 异步加载数据
easyUI 的 Tree组件在大部分时候都要从数据库读取数据,本文基于Java语言来实现easyUI tree的异步加载. 先看一下实现的效果: 整个过程采用的是简单三层架构,无论采用哪种模式,只要 ...
datagrid 重载本地数据_jQuery easyui datagrid重新加载数据
Jquery Easy ui datagrid的重新加载数据方法loadData中的data参数需要进行转换,如下示例代码如果想要datagrid填充为空使用$("#myGrid" ...
jquery,ajax动态从数据库加载数据并自动选中复选框
ajax动态加载下拉框数据(前端js发送ajax请求,后端查询数据库,得到数据,返回前端),GET,POST,DELETE,PUT上一篇地址上一篇讲了下拉框,现在说说复选框先从简单的单选框说起 & ...
使用EasyUI Tree异步加载JSON数据生成树
这几天因为工作需要,要做一个支持无限级的菜单. 我也是菜鸟一只,能想到的东西不多,所以用了Easy UI的tree组件. 不得不说,easyui确实很强大. 因为是无限级菜单,数据量可能有点大,所以考 ...
swiper支持动态加载数据
用swiper插件动态加载数据:动态获取完数据之后,在初始化swiper. 1.在<head>标签里面加入swiper的css和js文件 <link rel="styles ...
EasyUI datagrid 动态加载表头和数据
首先返回到页面的需要是JSON数据: 第一步: 遍历表头,插入到array中 for (var i = 0; i < jsonObj.title.length; i++) {//把返回的数据封装 ...
在NVIDIA A100 GPU中使用DALI和新的硬件JPEG解码器快速加载数据
在NVIDIA A100 GPU中使用DALI和新的硬件JPEG解码器快速加载数据如今,最流行的拍照设备智能手机可以捕获高达4K UHD的图像(3840×2160图像),原始数据超过25 MB.即使 ...
easyui combogrid分页加载默认值时无法自动跳转到相应页的解决方案
2019独角兽企业重金招聘Python工程师标准>>> 当如果easyui combogrid分布加载时,有默认值,且默认值不在第一页时,此时combogrid里的显示值为idFie ...

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

easyui Combotree 怎么加载数据支持多选相关推荐

最新文章

热门文章

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

easyui Combotree 怎么加载数据 支持多选相关推荐

最新文章

热门文章

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

easyui Combotree 怎么加载数据支持多选相关推荐