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点击我下载
随机推荐
- 关于安装qt之后的qmake命令
今天通过在archlinux中安装qt5发现了关于qmake这个命令的一些事情. 1. /bin/qmake 是 /bin/qtchooser 的符号链接,/bin/qtchooser 由一个叫 qt ...
- js 获取 根目录
//js获取项目根路径,如: http://localhost:8083/uimcardprjfunction getRootPath(){ //获取当前网址,如: http://localhost: ...
- 四、Salesforce Styles_1
1.静态变量的使用:<apex:stylesheet value="{!$Resource.TestStyles}"/>2.<apex:page><s ...
- NET中的类型和装箱/拆箱原理
谈到装箱拆箱,DebugLZQ相信给位园子里的博友一定可以娓娓道来,大概的意思就是值类型和引用类型的相互转换呗---值类型到引用类型叫装箱,反之则叫拆箱.这当然没有问题,可是你只知道这么多,那么Deb ...
- Abot爬虫和visjs
1. 引言 最近接触Abot爬虫也有几天时间了,闲来无事打算从IMDB网站上爬取一些电影数据玩玩.正好美国队长3正在热映,打算爬取漫威近几年的电影并用vis这个JS库呈现下漫威宇宙的相关电影. Abo ...
- SQL SERVER数据库的表中修改字段属性被阻止“Prevent saving changes that require table re-creation”
1.启动SQL SERVER,选择工具—>选项,去掉“ 阻止保存要求重新创建表的更改”前面的勾. 2.选择设计器 3.去掉“阻止保存要求重新创建表的更改”前面的对号,点击OK. 重新启动SQL ...
- Hadoop学习笔记：MapReduce框架详解
开始聊mapreduce,mapreduce是hadoop的计算框架,我学hadoop是从hive开始入手,再到hdfs,当我学习hdfs时候,就感觉到hdfs和mapreduce关系的紧密.这个可能 ...
- linux-ubuntu常用命令
常用命令 cd 目录 #跳转到指定目录 cp fileName pfileName #拷贝fileName到pfilename ll #显示目录下的所有文件和目录 uname -a #查看内核版本 c ...
- ubuntu如何以删除文件夹？
rm [选项] 文件 -f, --force 强力删除,不要求确认 -i 每删除一个文件或进入一个子目录都要求确认 -I 在删除超过三个文件或者递归删除前要求确认 -r, -R 递归删除子目录 -d, ...
- zabbix通过API创建交换机模板,ifAdminStatus;ifOperStatus;ifInUcastPkts;ifAlias
最终效果: 目的: 通过zabbix的Latest data查看主机就可以看到其监控结果. 监控项: # 管理状态 IF-MIB::ifAdminSt ...