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点击我下载
随机推荐
- opencv的学习笔记3
CMake是一个比make更高级的编译配置工具,它可以根据不同平台.不同的编译器,生成相应的Makefile或者vcproj项目.通过编写CMakeLists.txt,可以控制生成的Makefile, ...
- core animation （转）
iOS Core Animation 简明系列教程 看到无数的CA教程,都非常的难懂,各种事务各种图层关系看的人头大.自己就想用通俗的语言翻译给大家听,尽可能准确表达,如果哪里有问题,请您指出我会尽快 ...
- 滑动的Button
在介绍SwitchButton之前,先来看一下系统Button是如何实现的.源码如下: @RemoteView public class Button extends TextView { publi ...
- cocos2d-x的lua脚本加载CocostudioUI两种方式
前言 当前版本使用的是quick cocos2dx lua 3.3.UI使用cocostudio编辑器1.6.0.我们在程序里面可以使用两种方式进行解析UI.开始的时候用的是quick的方法, 结果遇 ...
- .sh脚本判断判断某一变量是否为某一数值
.sh脚本中,判断某一变量(例如:OEM_CUSTOMER_SUPPORT)是否为某一数值(例如:0),并根据条件做不同处理,写法如下: if [ $OEM_CUSTOMER_SUPPORT -eq ...
- PowerDeigner 一个很好的画uml 和建模的软件
pd: http://pan.baidu.com/s/1o6qpCT0
- laravel框架总结(五) -- 服务提供者(提及契约Contracts)
首先理解两个概念 1.契约:一组定义了框架核心服务的接口 2.服务提供者:所有 Laravel 应用程序启动的中心所在. 包括你自己的应用程序,以及所有的 Laravel 核心服务,都是通过服务提供者 ...
- 改变Web Browser控件IE版本
默认的webbrowser控件使用的渲染模式版本似乎是IE7,想要更改更高版本,如下: 在注册表位置 HKEY_CURRENT_USER\Software\Microsoft\Internet Exp ...
- 【jQuery】window.onload 和 $(document).ready() 的区别
... 在Stack Overflow上看到了这个问题,自己翻译了过来. The onload event is a standard event in the DOM, while the read ...
- 在用busybox制作系统过程中遇到的问题
遇到的问题: 1.开机报错: 在做完整个系统之后重启出现了这个报错 VFS: Cannot open root device "sda2" or unknown-block(0,0 ...