支持IE6的树形节结构TreeTable实际应用案例
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.treeTable.js" type="text/javascript"></script>
<link href="default/jquery.treeTable.css" rel="stylesheet" type="text/css" />
<table id="treeTable">
<tr id="43" pid="0" department_id="43">
<td>
<input type="checkbox" value="43" /><img src="default/jinghui.png" />大安
</td>
</tr>
<tr id="7" pid="43" manage_id="7">
<td>
<input type="checkbox" value="7" /><img src="default/jingyuan.png" />测试
</td>
</tr>
<tr id="5" pid="43" manage_id="5">
<td>
<input type="checkbox" value="5" /><img src="default/jingyuan.png" />张警官
</td>
</tr>
<tr id="47" pid="0" department_id="47">
<td>
<input type="checkbox" value="47" /><img src="default/jinghui.png" />自贡市公安局
</td>
</tr>
<tr id="4" pid="47" manage_id="4">
<td>
<input type="checkbox" value="4" /><img src="default/jingyuan.png" />管理员
</td>
</tr>
<tr id="50" pid="47" department_id="50">
<td>
<input type="checkbox" value="50" /><img src="default/jinghui.png" />信息中心
</td>
</tr>
<tr id="48" pid="47" department_id="48">
<td>
<input type="checkbox" value="48" /><img src="default/jinghui.png" />自贡公安局指挥中心
</td>
</tr>
<tr id="49" pid="48" department_id="49">
<td>
<input type="checkbox" value="49" /><img src="default/jinghui.png" />招生办
</td>
</tr>
<tr id="9" pid="49" manage_id="9">
<td>
<input type="checkbox" value="9" /><img src="default/jingyuan.png" />赵警官
</td>
</tr>
<tr id="46" pid="0" department_id="46">
<td>
<input type="checkbox" value="46" /><img src="default/jinghui.png" />沿滩
</td>
</tr>
<tr id="45" pid="0" department_id="45">
<td>
<input type="checkbox" value="45" /><img src="default/jinghui.png" />富顺
</td>
</tr>
<tr id="8" pid="45" manage_id="8">
<td>
<input type="checkbox" value="8" /><img src="default/jingyuan.png" />富顺用户
</td>
</tr>
<tr id="39" pid="0" department_id="39">
<td>
<input type="checkbox" value="39" /><img src="default/jinghui.png" />贡井
</td>
</tr>
<tr id="6" pid="39" manage_id="6">
<td>
<input type="checkbox" value="6" /><img src="default/jingyuan.png" />贡井用户
</td>
</tr>
<tr id="38" pid="0" department_id="38">
<td>
<input type="checkbox" value="38" /><img src="default/jinghui.png" />自流井
</td>
</tr>
</table>
<script type="text/javascript">
$(function () {
var option = {
expandLevel: 6, //默认展开的层次
beforeExpand: function ($treeTable, id) {
//判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
if ($('.' + id, $treeTable).length) { return; }
//这里的html可以是ajax请求
var html = ''; $treeTable.addChilds(html);
},
onSelect: function ($treeTable, id) {
window.console && console.log('onSelect:' + id); } };
$('#treeTable').treeTable(option); /* START 修改时绑定部门*/
$("#treeTable tr[department_id]").each(function () { if ($("#HF_departs_edit").val() != "") {
var departs1 = $("#HF_departs_edit").val().substr(0, $("#HF_departs_edit").val().length - 1).split('|');
for (var j = 0; j < departs1.length; j++) {
if (departs1[j] == $(this).find("input[type=checkbox]").val()) {
$(this).find("input[type=checkbox]").attr("checked", "checked");
}
}
}
});
/* END 修改时绑定部门*/
/* START 修改时绑定人员*/
$("#treeTable tr[manage_id]").each(function () { if ($("#HF_managers_edit").val() != "") {
var managers1 = $("#HF_managers_edit").val().substr(0, $("#HF_managers_edit").val().length - 1).split('|');
for (var j = 0; j < managers1.length; j++) {
if (managers1[j] == $(this).find("input[type=checkbox]").val()) {
$(this).find("input[type=checkbox]").attr("checked", "checked");
}
}
}
});
/* END 修改时绑定人员*/
$('#treeTable').click(function () {
var departs = "";
var managers = "";
$("#treeTable tr[department_id] td input[type=checkbox]").each(function () {
if ($(this).prop('checked') == true) {
departs += $(this).val() + "|";
alert(departs)
}
$("#HF_departs").val(departs);
}); //获取选中部门的值 $("#treeTable tr[manage_id] td input[type=checkbox]").each(function () {
if ($(this).prop('checked') == true) {
managers += $(this).val() + "|";
}
$("#HF_managers").val(managers);
}); //获取选中人员的值
}); }); </script>
<input type="hidden" name="HF_departs" id="HF_departs" />
<input type="hidden" name="HF_managers" id="HF_managers" />
<input type="hidden" name="HF_departs_edit" id="HF_departs_edit" />
<input type="hidden" name="HF_managers_edit" id="HF_managers_edit" />
实际为：
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.treeTable.js" type="text/javascript"></script>
<link href="default/jquery.treeTable.css" rel="stylesheet" type="text/css" />
<%=zNodes %>
<script type="text/javascript">
$(function () {
var option = {
expandLevel: 6, //默认展开的层次
beforeExpand: function ($treeTable, id) {
//判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
if ($('.' + id, $treeTable).length) { return; }
//这里的html可以是ajax请求
var html = ''; $treeTable.addChilds(html);
},
onSelect: function ($treeTable, id) {
window.console && console.log('onSelect:' + id); } };
$('#treeTable').treeTable(option); /* START 修改时绑定部门*/
$("#treeTable tr[department_id]").each(function () { if ($("#HF_departs_edit").val() != "") {
var departs1 = $("#HF_departs_edit").val().substr(0, $("#HF_departs_edit").val().length - 1).split('|');
for (var j = 0; j < departs1.length; j++) {
if (departs1[j] == $(this).find("input[type=checkbox]").val()) {
$(this).find("input[type=checkbox]").attr("checked", "checked");
}
}
}
});
/* END 修改时绑定部门*/
/* START 修改时绑定人员*/
$("#treeTable tr[manage_id]").each(function () { if ($("#HF_managers_edit").val() != "") {
var managers1 = $("#HF_managers_edit").val().substr(0, $("#HF_managers_edit").val().length - 1).split('|');
for (var j = 0; j < managers1.length; j++) {
if (managers1[j] == $(this).find("input[type=checkbox]").val()) {
$(this).find("input[type=checkbox]").attr("checked", "checked");
}
}
}
});
/* END 修改时绑定人员*/
$('#treeTable').click(function () {
var departs = "";
var managers = "";
$("#treeTable tr[department_id] td input[type=checkbox]").each(function () {
if ($(this).prop('checked') == true) {
departs += $(this).val() + "|";
alert(departs)
}
$("#HF_departs").val(departs);
}); //获取选中部门的值 $("#treeTable tr[manage_id] td input[type=checkbox]").each(function () {
if ($(this).prop('checked') == true) {
managers += $(this).val() + "|";
}
$("#HF_managers").val(managers);
}); //获取选中人员的值
}); }); </script>
<input type="hidden" name="HF_departs" id="HF_departs" />
<input type="hidden" name="HF_managers" id="HF_managers" />
<input type="hidden" name="HF_departs_edit" id="HF_departs_edit" />
<input type="hidden" name="HF_managers_edit" id="HF_managers_edit" />
css
.tree_table{border-collapse:collapse;border-spacing:0px;border: medium none;}
.tree_table tr{vertical-align:middle;height:30px;line-height:30px;border: medium none;}
.tree_table tr td{padding-left:10px;vertical-align:middle;border: medium none;}
.tree_table tr td input{vertical-align:middle;margin-left:10px}
.tree_table tr td img {vertical-align:middle;margin:0 5px}
.tree_table .default_node, .tree_table .default_active_node {vertical-align:middle;width:30px;height:30px;line-height:30px;border: medium none; margin:; padding:;display: inline-block;}
.tree_table .default_active_node {cursor: pointer;}
.tree_table .default_leaf{background:url(allbgs.png) no-repeat -33px -5px;width:30px;}/*T线*/
.tree_table .default_last_leaf{background:url(allbgs.png) no-repeat -120px -5px;width:30px;}/*折线*/
.tree_table .default_vertline{background:url(allbgs.png) no-repeat -57px -5px;width:30px;}/*竖线*/
.tree_table .default_open, .tree_table .default_hover_open{vertical-align:middle;background:url(allbgs.png) no-repeat -0px -5px;width:30px;}
.tree_table .default_shut, .tree_table .default_hover_shut{vertical-align:middle;background:url(allbgs.png) no-repeat -87px -5px;width:30px;}
.tree_table .default_last_shut, .tree_table .default_hover_last_shut{background:url(allbgs.png) no-repeat -158px -5px;width:30px;}
.tree_table .default_last_open, .tree_table .default_hover_last_open{background:url(allbgs.png) no-repeat -203px -5px;width:34px;}
asp.net后台代码
由两张表构成，一张部门表，一张人员表，人员和部门的关系为：人员所属部门
private string TreeTable()
{
BLL.department bll = new BLL.department();
DataTable dt = bll.GetList();//获取所有部门
BLL.manager blluser = new BLL.manager();
StringBuilder JsonData = new StringBuilder();
JsonData.Append("<table id=\"treeTable\">\r\n");
foreach (DataRow dr in dt.Rows)
{
JsonData.Append("<tr id=" + dr["id"].ToString() + " pId=" + dr["parent_depart"].ToString() + " department_id=" + dr["id"].ToString() + ">\r\n");
JsonData.Append("<td><input type=checkbox value=" + dr["id"].ToString() + " /><img src=\"../skin/default/jinghui.png\" />" + dr["depart_name"].ToString() + "</td>\r\n");
JsonData.Append("</tr>\r\n");
//JsonData.Append("{id:" + dr["id"].ToString() + ",department_id:\"department_id\",pId:" + dr["parent_depart"].ToString() + ",name:\"" + dr["depart_name"].ToString() + "\",open:true,icon:\"../skin/default/jinghui.png\"},\r\n");
DataTable dtuser = blluser.GetList(, "department_id=" + dr["id"].ToString(), " id desc").Tables[];
foreach (DataRow rowuser in dtuser.Rows)
{
JsonData.Append("<tr id=" + rowuser["id"].ToString() + " pId=" + rowuser["department_id"].ToString() + " manage_id=" + rowuser["id"].ToString() + ">\r\n");
JsonData.Append("<td><input type=checkbox value=" + rowuser["id"].ToString() + " /><img src=\"../skin/default/jingyuan.png\" />" + rowuser["real_name"].ToString() + "</td>\r\n");
JsonData.Append("</tr>\r\n");
//JsonData.Append("{id:" + rowuser["id"].ToString() + ",manage_id:\"manage_id\",pId:" + rowuser["department_id"].ToString() + ",name:\"" + rowuser["real_name"].ToString() + "\",open:true,icon:\"../skin/default/jingyuan.png\"},\r\n"); } }
JsonData.Append("</table>\r\n"); return JsonData.ToString();
}
protected string zNodes="";
//页面加载事件
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
this.zNodes = TreeTable();
}
}
TreeTable基础讲解：http://www.cnblogs.com/qigege/p/5213639.html
支持IE6的树形节结构TreeTable实际应用案例的更多相关文章
- 支持IE6的树形节结构TreeTable
关于TreeTable实际应用的案例:http://www.cnblogs.com/qigege/p/5213689.html treeTable是跨浏览器.性能很高的jquery的树表组件,它使用非 ...
- 国人Web前端开发必备干货，一个完美支持IE6在内所有浏览器的CSS框架
摘要: 企户动CSS框架是一个能够完美支持IE6~7在内的所有浏览器的 HTML&CSS 前端框架!给Web开发提供了自适应宽度的百分比多列网格,以及已语义化和结构化的标题.段落.列表.表格. ...
- MySQL 树形索引结构 B树 B+树
MySQL 树形索引结构 B树 B+树 如何评估适合索引的数据结构 索引的本质是一种数据结构 内存只是临时存储,容量有限且容易丢失数据.因此我们需要将数据放在硬盘上. 在硬盘上进行查询时也就产生了 ...
- jQuery 2.0发布，不再支持IE6/7/8
有时发现jQuery库引用的都对,javascript代码写的也没问题,可是jquery就是出现问题,额--我发现换个jquery库就没问题了,长时间不关注jquery的问题而已: 很多人都没有使用最 ...
- 淘宝天猫网站停止支持IE6、IE7浏览器，你还在用xp吗？
2016年4月14日,是科比正式告别篮球的最后一场球赛.大家都在忙着各种纪念和怀念着看科比打球的青葱岁月.不过已经完美谢幕.而我们今天要说的是微软的IE6.IE7浏览器.淘宝网和天猫商城正式停止支持I ...
- CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8
CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...
- [SinGuLaRiTy] 树形存储结构阶段性测试
[SinGuLaRiTy-1011] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. G2019级信息奥赛专项训练 题目 程序名 时间 内存 ...
- oracle 树形表结构查询 排序
oracle 树形表结构排序 select * from Table start with parentid is null connect by prior id=parentid order SI ...
- Java实现遍历N级树形目录结构
最近挺忙,一直在做项目,然后有个树形目录结构需要返回给前端,这里给大家说一下实现的思路. 具体达到的效果类似: 一级目录A: 二级目录A: 三级目录: 四级目录: 文件.txt 二级目录B: 文件1. ...
随机推荐
- LeetCode37 Sudoku Solver
题目: Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicated b ...
- Java优先级队列
package com.lk.A; import java.util.PriorityQueue; public class Test5 { public static void main(Strin ...
- iOS - 第三方框架 - AFN
#5.AFNetworking 2.6使用方法 >2.6版本 支持 iOS7以上,而且支持NSURLConnectionOperation >3.0版本 支持 iOS7以上 NSURLCo ...
- Spring学习总结二——SpringIOC容器二
一:指定bean的依赖关系 例如examplebean对象依赖examplebean1对象,那么在创建examplebean对象之前就 需要先创建examplebean1对象. 1:创建Example ...
- 初识 Asp.Net内置对象之Response对象
Response对象 Respose对象用于将数据从服务器发送回浏览器.它允许将数据作为请求的结果发送到浏览器,并提供有光响应的信息,可以用来在页面中输入数据,在页面中跳转,还可以传递各个页面的参数, ...
- 洛谷P1251 餐巾（网络流）
P1251 餐巾 15通过 95提交 题目提供者该用户不存在 标签网络流贪心 难度提高+/省选- 提交该题 讨论 题解 记录 最新讨论 为什么我全部10个测试点都对… 题目描述 一个餐厅在相继的N天里 ...
- ASP.NET MVC 4 SimpleMembership Provider (1)
新的ASP.NET MVC 4.0 提供了一个新的Membership Provider,叫SimpleMembership. 首先,我们建立一个新的solution 首先我们先看一下web.conf ...
- HDU4277 USACO ORZ(dfs+set)
Problem Description Like everyone, cows enjoy variety. Their current fancy is new shapes for pasture ...
- 行列转换 pivot
select * from ( select isnull(c.type,'其他') type,d from ( select ID,Record_code,code,day(thedate) d f ...
- CAS Ticket SSO 登录流程图