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为空，则获取当前选中的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
easyui Combotree 怎么加载数据 支持多选的更多相关文章
- easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题
在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...
- easyui datagrid 动态加载数据 渲染问题，表格错位问题
$('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {fie ...
- jquery easyui datagrid 远程加载数据----把主键渲染为值遇到的问题及解决方案
起因:数据库中一些字段存的是代表具体值的数字,需要渲染为具体值 monggodb中的字典 mysql中存放的值为:expertin代表教练擅长的搏击技能 jquery easyui中的相关代码如下:用 ...
- jquery easyui datagrid 远程加载数据----javascript法
jquery easyui有三种办法生成datagrid(数据网格),本篇专门讨论javascript借助jquey easy ui实现的方式 html部分 <main role="m ...
- easyui combobox 动态加载数据C#
<script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></scri ...
- Easyui combobox 怎么加载数据
说明:开发环境 vs2012 asp.net mvc4 c# 1.效果图 2.HTML代码 <%@ Page Language="C#" AutoEventWireup=&q ...
- EasyUI的datagrid加载数据去掉遮罩
转自:https://blog.csdn.net/why15732625998/article/details/77977570 代码: $(".datagrid-mask").r ...
- jquery easyui easyui-treegrid 使用异步加载数据
jquery easyui easyui-treegrid 使用异步加载数据 jquery easyui easyui-treegrid 异步请求 >>>>>>&g ...
- 解决easyui datagrid加载数据时，checkbox列没有根据checkbox的值来确定是否选中
背景: 昨天帮朋友做一个easyui datagrid的小实例时,才发现easyui datagrid的checkbox列,没有根据值为true或false来选中checkbox,当时感觉太让人失 ...
随机推荐
- 利用jenkins和hockey组织iOS持续交付过程
1. jenkins可以单独作为web应用部署和启动,但建议将其部署在tomcat上,可以方便的管理其他一些web应用,下面讲解如何在Mac设备上安装tomcat 到tomcat官网下载适用于Mac设 ...
- udp 多播2
11.3 多播 单播用于两个主机之间的端对端通信,广播用于一个主机对整个局域网上所有主机上的数据通信.单播和广播是两个极端,要么对一个主机进行通信,要么对整个局域网上的主机进行通信.实际情况下,经常 ...
- LeetCode OJ——Unique Binary Search Trees II
http://oj.leetcode.com/problems/unique-binary-search-trees-ii/ 一题要求得出所有树的种类数,二题要求得出所有树. 在一题的基础上修改代码, ...
- Django中使用表单
使用表单 表单用 user 提交数据,是网站中比较重要的一个内容 GET 和 POST 方法 GET 和 POST 的区别 URL,全称是"统一资源定位符".用于对应互联网上的每一 ...
- Python的格式化输出,基本运算符,编码
一. 格式化输出现在有以下需求,让用户输入name, age, job,hobby 然后输出如下所示: -----------info of Alex Li----------- Name : Ale ...
- vue v-show与v-for同时配合v-bind使用并在href中传递多个参数的使用方法
最近在项目中,因为还没使用前端构建工具,还在使用vue+jquery方法渲染页面 碰到几个小问题,在此记录下作为vue学习之路上的一个小知识点 需求:1.数据列表存在与否状态,没有数据显示默认提示,有 ...
- springboot idea激活指定profile
多Profile文件 配置文件编写的时,可以是application-{profile}.properties/yml,默认使用application.properties的配置: 激活指定profi ...
- 邁向IT專家成功之路的三十則鐵律 鐵律二十三：IT人的成家之道-樸實
根據內政部一份2013年最新的調查報告指出台灣人的離婚率位居全球第三,想想看如果這是經濟成長率的排名表現那該有多好.然而究竟為何在台灣這塊小小的土地上,不僅離婚非常高而且晚婚的人也非常的多,其原因肯定 ...
- 邁向IT專家成功之路的三十則鐵律 鐵律十：IT人思維之道-跳脫框架
莊子的哲學思想歸本於老子,他認為人要解脫束縛必須做到不從任何的角度與任何的時間來看待事物,而是必須與天地同體,然而也唯有如此才能看清宇宙間萬事萬理的真諦.無論是莊子還是老子,他們畢竟是中國古代的聖賢, ...
- Java Unsafe类
参考了这篇文章:http://blog.csdn.net/aesop_wubo/article/details/7537278 <JAVA并发编程学习笔记之Unsafe类> Unsafe开 ...