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点击我下载
随机推荐
- C#知识点有必要知会
如果说你父类里面有一个成员比如int a;那么你子类里面也可以再定义一个int a,这个时候base.a和this.a表示的就不是一个变量了,如果说子类里面没有,那么base.a和this.a表示的都 ...
- 运行nodejs的blog程序遇见问题
我是运行这个教程的代码.可以在网上找到相关视频和代码. 第一个问题,数据库中没有创建对应的表就开始运行程序.node app.js 这个错误问题大家可以去重现一下 第二个问题,我也没有看明白,但是我根 ...
- nginx安装ssl
http://wiki.nginx.org/Modules#Standard_HTTP_modules 这里面带有所有基本的模块,及需要额外增加的模块 1.安装带有ssl模块的 nginx wget ...
- JQuery 层次选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...
- Apache Solr 访问权限控制
Current state of affairs SSL support was added in version 4.2 (SolrCloud v4.7). Protection of Zookee ...
- iscroll 使用及遇到的问题
介绍: iscroll.js 是滑动事件.在手机上可以快速的滑动,用户体验很好.在线例子: 选择套餐 iScroll必须在调用之前实例化---用法 <script src="iscro ...
- 《K&R》里贯穿全书的代码
个人阅读<K&R>的感觉就是:前后内容联系特别紧密,前面的代码没有理解好到了后面就看不下去. 1.getline(char s[], int lim) 调用结果:往参数数组中读入字 ...
- lamp centos虚拟主机配置
1.基于不同端口的虚拟主机配置 [root@lamp~]# vi /etc/httpd/conf/httpd.conf Listen 80 #设置监听不同的虚拟主机需要使用的端口 Liste ...
- suds调用webservice
一.安装 pip install suds 二.日志 import logging logging.basicConfig(level=logging.INFO) logging.getLogger( ...
- 中国Linux源镜像站大全
原文链接:http://www.centoscn.com/yunwei/news/2012/1227/131.html 一.国内的linux源镜像站点: 1.企业源:阿里云开源镜像站: http:// ...