easyui 之ComboTree 用法Demo
实现效果如下：
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>
<script src="../../Jquery/jquery-easyui-1.4.2/jquery.min.js"></script>
<script src="../../Jquery/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<link href="../../Jquery/jquery-easyui-1.4.2/themes/gray/easyui.css" rel="stylesheet" />
<link href="../../Jquery/jquery-easyui-1.4.2/themes/icon.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
//绑定事业部
$('#tbxBelongsBU').combotree({
url: 'Handler.ashx?type=GetBelongsBU',
valueField: 'ID',
textField: 'BUList',
panelHeight: 'auto',
editable: false
});
$('#tbxBelongsBU').combotree("setValue", "请选择");
//绑定OS
$('#tbxBelongsOS').combobox({
url: 'Handler.ashx?type=GetOSList',
valueField: 'ID',
textField: 'OS',
panelHeight: 'auto',
editable: false,
onChange: function (newValue, oldValue) {
$("#tbxBelongsBU").combotree("clear");
var url = "";
if (newValue != "") {
url = "Handler.ashx?type=GetBelongsBU&OS=" + encodeURIComponent(newValue);
}
else {
url = "Handler.ashx?type=GetBelongsBU";
}
$("#tbxBelongsBU").combotree("reload", url);
$("#tbxBelongsBU").combotree("setValue", '请选择')
}
});
$('#tbxBelongsOS').combobox("setValue", "请选择"); $('#dg').datagrid({
//加载提示
loadMsg: '数据加载中请稍后……',
nowrap: false,
striped: true,
border: true,
//是否可折叠的
collapsible: true,
dataType: "json",
method: 'get',
//是否加行号
rownumbers: true,
//true勾选会选择行，false勾选不选择行
selectOnCheck: true,
//true选择行勾选，false选择行不勾选
checkOnSelect: true,
//DataGrid Virtual Scroll
//view: scrollview,
//是否显式分页
pagination: true,
//页容量，必须和pageList对应起来，否则会报错
pageSize: 50,
//默认显示第几页
pageNumber: 1,
//分页中下拉选项的数值
pageList: [50, 80, 100],
//搜索json
//queryParams: params,
//自动行高
autoRowHeight: false,
url: 'Handler.ashx?type=getProcessList&RandValue=' + (new Date()).valueOf(),
columns: [[
{ field: 'OrderID', title: '所属事业部', width: 200, align: 'left', sortable: true },
{ field: 'CusName', title: '发起人', width: 200, align: 'left', sortable: true },
{ field: 'SpreadName', title: '流程分类', width: 80, align: 'left', sortable: true },
{ field: 'WorkTime', title: '流程类型', width: 100, align: 'center', sortable: true },
{ field: 'InspectionType', title: '审核人', width: 100, align: 'center', sortable: true }//,
//{ field: 'LeaderEvaluation', title: '操作', width: 80, align: 'center', sortable: true, formatter: formatterLeaderEvaluation },//, formatter: formatterLeaderEvaluation
//{
// field: 'Evaluation', title: '编辑', width: 50, align: 'center', sortable: true, formatter: function (value, row, index) {
// return formatEvaluation( value, row, index);
// // return "<a href='" + row.OrderID + "' target='_blank'>" + value + "</a>"
// },
// field: 'Evaluation', title: '删除', width: 50, align: 'center', sortable: true, formatter: function (value, row, index) {
// return formatEvaluation(value, row, index);
// // return "<a href='" + row.OrderID + "' target='_blank'>" + value + "</a>"
// } //}
]],
//禁止自适应宽度、可以水平滚动
fitColumns: false,
singleSelect: true,
onLoadSuccess: function (data) { },
toolbar: '#tb',
footer: '#ft'
//onAfterEdit: function (rowIndex, rowData, changes) {
// editRow = undefined;
//},
//onDblClickRow: function (rowIndex, rowData) {
// if (editRow != undefined) {
// $("#dg").datagrid('endEdit', editRow);
// } // if (editRow == undefined) {
// $("#dg").datagrid('beginEdit', rowIndex);
// editRow = rowIndex;
// }
//},
//onClickRow: function (rowIndex, rowData) {
// if (editRow != undefined) {
// $("#dg").datagrid('endEdit', editRow); // }
//}
});
//设置分页控件
var p = $('#dg').datagrid('getPager');
$(p).pagination({
pageSize: 50,//每页显示的记录条数，默认为10
pageList: [50, 80, 100],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
}); </script>
</head>
<body>
<form id="form1" runat="server"> <div id="p" class="easyui-panel" title="流程列表"
style="padding:10px;background:#fafafa;"
data-options="iconCls:'icon-list-view',collapsible:true"> <table id="dg"> </table> <div id="tb" style="padding:5px">
<table style="width:100%">
<tr>
<td>所属系统:</td>
<td><input id="tbxBelongsOS" name="tbxBelongsOS" /></td>
<td>所属事业部:</td>
<td><input id="tbxBelongsBU" name="tbxBelongsBU" /></td>
<td> 流程类型:</td>
<td><input id="tbxProcessType" name="tbxProcessType" /></td>
<td ><a href="#" id="btnSearch" name="btnSearch" class="easyui-linkbutton" iconcls="icon-search">查询</a></td>
</tr>
</table>
</div> <div style="text-align:left; padding:10px" id="ft">
<a href="#" id="btnAddNew" class="easyui-linkbutton" plain="true" iconcls="icon-add">新增</a>
</div>
</div>
</form>
</body>
</html>
EasyTreeData部分：
/// <summary>
/// 定义EasyUI树的相关数据，方便控制器生成Json数据进行传递
/// </summary>
public class EasyTreeData
{
/// <summary>
/// ID
/// </summary>
public int id { get; set; } /// <summary>
/// 节点名称
/// </summary> public string text { get; set; } /// <summary>
/// 是否展开
/// </summary> public string state { get; set; } /// <summary>
/// 图标样式
/// </summary> public string iconCls { get; set; } /// <summary>
///其他属性
/// </summary>
public attribute attributes { get; set; } /// <summary>
/// 子节点集合
/// </summary>
public List<EasyTreeData> children { get; set; } /// <summary>
/// 默认构造函数
/// </summary>
public EasyTreeData()
{
this.children = new List<EasyTreeData>();
this.state = "open";
this.attributes = null;
} /// <summary>
/// 常用构造函数
/// </summary>
public EasyTreeData(int id, string text, string iconCls = "", attribute attributes = null, string state = "open")
: this()
{
this.id = id;
this.text = text;
this.state = state;
this.iconCls = iconCls;
this.attributes = attributes;
} } public class attribute
{
public string url { get; set; }
//other data
}
Hanlder方法：
using System.Collections.Generic;
using System.Linq;
using System.Web.Script.Serialization; public void GetBelongsBU(HttpContext context)
{
context.Response.ContentType = "text/json";
DataSet ds=new DataSet();
DataTable dt = new DataTable();
List<Organization> listOrganization=new List<Organization>();
List<EasyTreeData> list = new List<EasyTreeData>();
string json = string.Empty;
int id = ;
if(context.Request.QueryString["OrgID"]!=null)
{
id = Convert.ToInt32(context.Request.QueryString["OrgID"]);
}
if (context.Request.QueryString["OS"] != null)
{
switch(context.Request.QueryString["OS"])
{
case "":
//电子
DBUtility.Sqlhelper.connectionString = ConfigurationManager.AppSettings["ConnectionString_ELEC"]; OrganizationJsonTree( ds, dt, ref json); break;
case "":
//汽车
DBUtility.Sqlhelper.connectionString = ConfigurationManager.AppSettings["ConnectionString_FM"];
OrganizationJsonTree( ds, dt, ref json);
break;
case "":
//检验鉴定
DBUtility.Sqlhelper.connectionString = ConfigurationManager.AppSettings["ConnectionString_AI"];
OrganizationJsonTree( ds, dt, ref json);
break;
}
}
//换回OA的连接
DBUtility.Sqlhelper.connectionString = ConfigurationManager.AppSettings["ConnectionString_OA"]; context.Response.Write(json);
context.Response.End();
}
/// <summary>
/// 组织生产ComboxTree
/// </summary>
/// <param name="ds"></param>
/// <param name="dt"></param>
/// <param name="json"></param>
private static void OrganizationJsonTree( DataSet ds, DataTable dt, ref string json)
{
ds = DBUtility.Sqlhelper.Query("SELECT OrgID,OrgName,ParentID FROM dbo.HR_Organization "); if (ds != null)
{
dt = ds.Tables[]; Func<DataRow, EasyTreeData> row2node = null;
row2node = row => new EasyTreeData
{
id = row.Field<int>("OrgID"),
text = row.Field<string>("OrgName"),
state = "open",
children = dt.Select("[ParentID]='" + row.Field<int>("OrgID") + "'").Select(r => row2node(r)).ToList()
}; var nodes = dt.Select("[ParentID]='0'").Select(r => row2node(r));
json = new JavaScriptSerializer().Serialize(nodes); // 引用 System.Web.Extensions }
}
/// <summary>
/// 加载系统列表
/// </summary>
/// <param name="context"></param>
public void GetOSList(HttpContext context)
{
context.Response.ContentType = "text/json"; string type = System.Configuration.ConfigurationManager.AppSettings["TheOSList"];
string[] splitValue = type.Split(',');
DataTable dttype = new DataTable();
DataColumn dc = null;
dc = dttype.Columns.Add("ID", Type.GetType("System.String"));
dc = dttype.Columns.Add("OS", Type.GetType("System.String"));
for (int i = ; i < splitValue.Length; i++)
{
DataRow newRow = dttype.NewRow();
newRow["ID"] = splitValue[i].Split('|')[];
newRow["OS"] = splitValue[i].Split('|')[]; dttype.Rows.Add(newRow);
}
DataRow dr = dttype.NewRow();
dr["ID"] = "";
dr["OS"] = "请选择";
dttype.Rows.InsertAt(dr, ); context.Response.Write(Common.ToJson.Dtb2Json(dttype));
context.Response.End();
}
其中，主要方法就是OrganizationJsonTree，生成递归json以供ComboTree调用。
easyui 之ComboTree 用法Demo的更多相关文章
- Easyui主要组件用法
Easyui主要组件用法说明: 1. combogrid用法 说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示 ...
- easyui中combotree只能选子选项，父级不被选中
前言 前几天面试遇到一个需求(easyui中combotree只能选子选项,父级不被选中),回来特意整理下,大概的思想是如果该tree的节点被选中是判定一下是否有子节点,如果没有就说明是最终节点了,步 ...
- QMsgPack的用法DEMO
QMsgPack的用法DEMO 引用单元文件: uses qstring, qmsgpack, qjson; 演示一: procedure TForm2.Button10Click(Sender: T ...
- 第二百二十七节，jQuery EasyUI，ComboTree(树型下拉框)组件
jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个 ...
- 【EasyUI】combotree和combobox模糊查询
这里说的模糊查询指在输入框输入,然后自动在下拉框中显示匹配结果,类似Google搜索提示 EasyUI库已经实现了combobox的查询过滤功能,但只能从头匹配,原因是EasyUI库的代码限制: fi ...
- easyui之combotree
这几天时间比较空闲的我把easyui中比较难的控件回顾一遍 这次的总结是easyui中的combotree easyui的中文文档上说:combotree结合选择控制和下拉树,类似于combobox只 ...
- easyUI combobox combotree 模糊查询,带上下键选择功能，待完善。。。。
/2017年4月9日 11:52:36 /** * combobox和combotree模糊查询 * combotree 结果带两级父节点(手动设置数量) * 键盘上下键选择叶子节点 * 键盘回车键设 ...
- （一）easyUI之第一个demo
一.下载 官网下载 : http://www.jeasyui.net/download/ 同时并下载官方中文API文档. 解压后的目录结构: 二.第一个demo 1 新建工程并导入包 2 ...
- easyUI 后台经典框架DEMO下载
采用easyui 1.2.6 + jquery 1.7.2 设计 有不明白的朋友加群或加我QQ (709047174) Jquery-EasyUi-demo点击我下载
随机推荐
- 服务器保持与Mysql的连接
服务器程序经常要访问数据库,并且服务器程序是长时间保持运行的,mysql有一个特点,当连接上数据库后不做任何操作,默认8小时候会自动关闭休 眠的连接!一般情况下很难预料什么时候程序会执行数据库操作,如 ...
- 操作SSIS之前的准备工作
SSIS的历史概述: 在SQL Server7.0中,微软成立了一个很小的开发团队开发SQL Server中一个非常低调的功能,该功能被称为DTS(数据转换服务),该功能一直被沿用到SQL2000. ...
- s3c2440 移值新内核 linux-4.1.36
arm-linuxgcc version 4.3.2 经过试验,最高可以编译到 linux-4.1.36 ,在高的版本会有错误 ,可能是 GCC 编译器版本较低造成. 解压比较麻烦还要装一个 xz x ...
- POJ 3436：ACM Computer Factory（最大流记录路径）
http://poj.org/problem?id=3436 题意:题意很难懂.给出P N.接下来N行代表N个机器,每一行有2*P+1个数字 第一个数代表容量,第2~P+1个数代表输入,第P+2到2* ...
- Flowplayer-JavaScript API
source url: https://flowplayer.org/docs/api.html Global API access Use the flowplayer function to ge ...
- netstat命令详解
它主要的用法和详解! (netstat -na 命令),本文主要是说Linux下的netstat工具,然后详细说明一下各种网络连接状态. netstat -nat |awk ‘{print $}’|s ...
- SNMP OID列表 监控需要用到的OID
zabbix的snmp监控还没开始讲,不过先给大家列一些snmp常用的一些OID,比如cpu.内存.硬盘什么的.先了解这些,在使用snmp监控服务器. 系统参数(1.3.6.1.2.1.1) OID ...
- lua table remove元素的问题
当我在工作中使用lua进行开发时,发现在lua中有4种方式遍历一个table,当然,从本质上来说其实都一样,只是形式不同,这四种方式分别是: for key, value in pairs(tbtes ...
- Beginning Windows Azure Development Guide
目 录 一 初始化Windows Azure 二 云应用程序的编写. 2.1云应用程序的创建. 2.2一个简单的云应用程序. 2.3 托管云程序. 三 云程序的数据库操作. 3.1通过Cloud平台 ...
- linux 之SCP
一.从本地到远程复制 1.复制文件 * 命令格式: 1.scp -P remote_port local_file remote_username@remote_ip:remote_folder 或者 ...