easyui combotree的使用

前台HTML:

<div class="search-container">
    <table class="search-container-table" cellpadding="0" cellspacing="0">
        <tr>
            <td>统计年份:</td>
            <td>
                <input type="text" class="input-text" id="year" name="year" onclick="WdatePicker({ dateFmt: ‘yyyy‘, minDate: ‘1980‘, maxDate: ‘2099‘ })" />
            </td>
            <td>统计部门:</td>
            <td>
                <input type="text" name="dept" id="dept" class="easyui-combotree" style="width: 202px; height: 29px; overflow: auto" />
            </td>
        </tr>
        <tr>
            <td>检测项目:
            </td>
            <td>
                <input name="testItem" id="testItem" class="easyui-combotree" style="width: 250px; height: 29px;" />
            </td>
            <td>
                <a class="a-btn" href="javascript:void(0);" onclick="loadgrid()">
                    <img alt="" src="~/Content/images/stat.gif" />
                    统计
                </a>
            </td>
        </tr>
    </table>
</div>

前台JS:

//部门树
$("#dept").combotree({
    editable: false,
    url: ‘@Url.Content("~/DetReport/DetReportManage/GetDeptTree")‘,
    onSelect: function (node) {
        //加载检测项目
        $("#testItem").combotree({
            editable: false,
            url: ‘@Url.Content("~/DetReport/YSLReport/GetTestItemTree?deptCode=")‘ + node.id,
            onSelect: function (node) {
                //显示全路径
                var parent = node;
                var tree = $(‘#testItem‘).combotree(‘tree‘);
                var path = new Array();
                do {
                    path.unshift(parent.text);
                    var parent = tree.tree(‘getParent‘, parent.target);
                } while (parent);
                var pathStr = ‘‘;
                for (var i = 0; i < path.length; i++) {
                    pathStr += path[i];
                    if (i < path.length - 1) {
                        pathStr += ‘ - ‘;
                    }
                }
                setTimeout(function () {
                    $(‘input[name="testItem"]‘).prev().val(pathStr);
                }, 100);
            }
        });
    }
});

后台代码1:

/// <summary>
/// 获取部门树
/// </summary>
public JsonResult GetDeptTree()
{
    List<object> list = new List<object>();

    List<SYS_DEPT> deptListAll = m_DeptDal.GetDeptListAll();
    foreach (SYS_DEPT dept0 in deptListAll.FindAll(a => string.IsNullOrWhiteSpace(a.PDEPTCODE)))
    {
        var obj0 = new
        {
            id = dept0.DEPTCODE,
            text = dept0.DEPTNAME,
            children = new List<object>()
        };
        foreach (SYS_DEPT dept1 in deptListAll.FindAll(a => a.PDEPTCODE == dept0.DEPTCODE))
        {
            var obj1 = new
            {
                id = dept1.DEPTCODE,
                text = dept1.DEPTNAME,
                children = new List<object>()
            };
            foreach (SYS_DEPT dept2 in deptListAll.FindAll(a => a.PDEPTCODE == dept1.DEPTCODE))
            {
                var obj2 = new
                {
                    id = dept2.DEPTCODE,
                    text = dept2.DEPTNAME,
                    children = new List<object>()
                };
                foreach (SYS_DEPT dept3 in deptListAll.FindAll(a => a.PDEPTCODE == dept2.DEPTCODE))
                {
                    var obj3 = new
                    {
                        id = dept3.DEPTCODE,
                        text = dept3.DEPTNAME,
                        children = new List<object>()
                    };
                    obj2.children.Add(obj3);
                }
                obj1.children.Add(obj2);
            }
            obj0.children.Add(obj1);
        }
        list.Add(obj0);
    }

    return Json(list, JsonRequestBehavior.AllowGet);
}

后台代码2:

/// <summary>
/// 获取检测项目树(统计用)
/// </summary>
public JsonResult GetTestItemTree(string deptCode)
{
    List<object> list = new List<object>();

    List<SYS_DEPT> deptListAll = m_DeptDal.GetDeptListAll();
    List<DETECTIONITEMS> itemListAll = m_DetectionItemsDAL.GetDetectionItemsListAll();
    List<SPECIALTY> specialtyListAll = m_SpecialtyDAL.GetSpecialtyListAll();
    List<SYS_DEPT> deptList = deptListAll.FindAll(a => a.DEPTCODE.IndexOf(deptCode) == 0);
    if (deptList.Count > 0)
    {
        foreach (SPECIALTY specialty in specialtyListAll.FindAll(a => deptList.Exists(b => b.DEPTCODE == a.DEPTCODE)))
        {
            var specialtyObj = new
            {
                id = specialty.SPECIALTYID,
                text = specialty.SPECIALTYNAME,
                leaf = false,
                type = 1, //1专业2样品名称3检测项目
                children = new List<object>()
            };
            foreach (DETECTIONITEMS items in itemListAll.FindAll(a => a.SPECIALTYID == specialty.SPECIALTYID && a.PID == 0))
            {
                List<DETECTIONITEMS> subItemsList = itemListAll.FindAll(a => a.PID == items.DETITEMID);
                var itemsObj = new
                {
                    id = items.DETITEMID,
                    text = items.ITEMNAME,
                    leaf = subItemsList.Count > 0 ? false : true, //只能选择leaf为true的节点
                    type = 2, //1专业2样品名称3检测项目
                    children = new List<object>()
                };
                foreach (DETECTIONITEMS subItems in subItemsList)
                {
                    var subItemsObj = new
                    {
                        id = subItems.DETITEMID,
                        text = subItems.ITEMNAME,
                        leaf = true, //只能选择leaf为true的节点
                        type = 3, //1专业2样品名称3检测项目
                        children = new List<object>()
                    };
                    itemsObj.children.Add(subItemsObj);
                }
                specialtyObj.children.Add(itemsObj);
            }
            list.Add(specialtyObj);
        }
    }

    return Json(list, JsonRequestBehavior.AllowGet);
}

示意图:

时间: 2024-11-05 11:57:19

easyui combotree的使用的相关文章

EasyUI ComboTree数据绑定树形分类显示

承接上篇博文[LINQ获取树形分类的层数].在上文中,笔者只分享了层数,在这里我把完整的实现贴出来,欢迎批评指正. 先附上效果图: 首先是Tree公共类 public class Tree { public int ModuleID { get; set; } public int ParentID { get; set; } public int ModulePath { get; set; } public string ModuleName { get; set; } } 接下来就是Tre

easyui combotree不让父级选中

easyui combotree不让父级选中? <ul id="combotree"></ul> $(function () { $("#combotree").combotree({ width: 300, data: [{ "id": 1, "text": "My Documents", "children": [{ "id": 11, &

表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等.当提交表单时,调用 'validate' 方法来检查表单是否有效. 用法 创建一个简单的 HTML 表单.构建表单并给 id.action.method 赋值. <form id="ff" method="post"> <div> <lab

EasyUI Combotree只选择叶子节点

EasyUI Combotree的方法拓展自Combo和Tree.而Tree有一个onBeforSelect事件来帮助我们实现只选择叶子节点的功能. Tree事件需要 'node' 参数,它包括下列属性: id:绑定到节点的标识值. text:要显示的文本. iconCls:用来显示图标的 css class. checked:节点是否被选中. state:节点状态,'open' 或 'closed'. attributes:绑定到节点的自定义属性. target:目标的 DOM 对象. onB

解决Easyui Combotree的SetValue方法无效

今天在写代码的时候,遇到个很奇怪的问题: $('#department_parent').combotree('setValue', row.id); AjaxForProvince(); $('#province').combobox('setValue', row.province_id); AjaxForCity(row.province_id); $('#city').combobox('setValue', row.city_id); AjaxForZone(row.city_id);

Jquery EasyUI Combotree根据选中的值展开所有父节点

Jquery EasyUI Combotree根据选中的值展开所有父节点  Jquery EasyUI Combotree 展开父节点, Jquery EasyUI Combotree根据子节点选中的值,展开前面所有父节点, Jquery EasyUI Combotree获取选中的值 ================================ ?Copyright 蕃薯耀 2018年5月7日 http://www.cnblogs.com/fanshuyao/ 一.Combotree获取父节

easyui combotree combobox 使用例子

一:引入easyui 二:使用例子 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Resurces/themes/easyui.css" rel="stylesheet" /> <link href="Resur

easyui.combotree.search.js

(function ($) { //combotree可编辑,自定义模糊查询 $.fn.combotree.defaults.editable = true; $.extend($.fn.combotree.defaults.keyHandler, { query: function (q) { var t = $(this).combotree('tree'); t.tree("search", q); } }); $.extend($.fn.tree.methods, {     

EasyUI ComboTree(树形下拉框) 简单实例

前台: <input id="cc">   <script type="text/javascript"> $('#cc').combotree({ required: true }).combotree("tree").tree({ url: 'tree.ashx?id=0&state=closed', checkbox: false, onBeforeExpand: function (node, param)

EasyUI ComboTree SpringMVC

1.涉及技术: EasyUI Spring MVC 2.jsp前端代码: <select id="workUser" class="easyui-combotree" style="width:200px;" data-options="url:'/csmis/csmisEquadjust/wswatree.action',required:true" multiple> </select> 3.jav