當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/10 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 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

7、easyUI引用文件

鏈接：https://pan.baidu.com/s/1KxL2QeVEbEVHU9UxV6LBWw
提取碼：cwbd

轉載于:https://www.cnblogs.com/net064/p/10265371.html

總結

以上是生活随笔為你收集整理的easyui Combotree 怎么加载数据支持多选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： linux下音频剪辑软件,音频剪辑软件哪
下一篇：第六章 jQuery选择器

编程问答

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

總結

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