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点击我下载
随机推荐
- 转：客制FORM调用会计科目弹性域/根据科目取得CODE_COMBINATION_ID
1.首先在创建数据表时,添一个字段用来保存会计科目的ID.如:CODE_COMBINATION_ID 2.在FORM相应的数据块增加两个ITEM,用来显示科目NUMBER与DESCRITION. 例: ...
- master page
<?xml version="1.0"?><configuration> <system.web> <pages clientID ...
- ddd
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAqiYF+Y89+3wKwCtvDOCJ6qQifvC+snwHsZEy6naujvCHXkeB/BcDDwnq ...
- lua 操作中文字符串之截取和长度竖排显示
前言 在游戏中,我们经常会遇到汉字的多行显示,比如名字竖行显示等.如下图: 为了实现上面的效果,lua实现分行是通过 \n 实现的,所以我们需要取出汉字,然后插入 \n 实现分行效果.还有一种就是 ...
- 改变Web Browser控件IE版本
默认的webbrowser控件使用的渲染模式版本似乎是IE7,想要更改更高版本,如下: 在注册表位置 HKEY_CURRENT_USER\Software\Microsoft\Internet Exp ...
- (转)使用myeclipse生成实体类和hibernate映射文件
转至:http://blog.sina.com.cn/s/blog_9658bdb40100uiod.html 1.下载并安装myeclipse,如果已经安装,则忽略该步骤; 2.打开myeclips ...
- oracle组查询
概念: 所谓组查询即将数据按照某列或者某些列相同的值进行分组,然后对该组的数据进行组函数运用,针对每一组返回一个结果. note: 1.组函数可以出现的位置: select子句和having 子句 2 ...
- java 代理模式一： 静态代理
代理模式: 代理模式的作用:为其他对象提供一种代理以控制对 特定对象 的访问. 某种情况下,一个客户不想或者直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用:通过代理对象引用. ...
- 《BI项目笔记》无法解密受保护的 XML 节点“DTS:Password” 解决办法
说明: 无法解密受保护的 XML 节点“DTS:Password”,错误为 0x8009000B“该项不适于在指定状态下使用.”.可能您无权访问此信息.当发生加密错误时会出现此错误.请确保提供正确的密 ...
- C++中虚析构函数的作用
我们知道,用C++开发的时候,用来做基类的类的析构函数一般都是虚函数.可是,为什么要这样做呢?下面用一个小例子来说明: 有下面的两个类: class ClxBase { public: ...