支持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. ...
随机推荐
- 帧与场 - djf_1985的专栏 - 博客频道 - CSDN.NET
帧与场 - djf_1985的专栏 - 博客频道 - CSDN.NET 电视信号是通过摄像机对自然景物的扫描并经光电转换形成的.扫描方式分为“逐行扫描”和“隔行扫描”.“逐行扫描”指每幅图像均是由电子 ...
- flume1.5.2安装与简介
关于flume的简介看参考:http://www.aboutyun.com/thread-7415-1-1.html 其实一张图就简单明了了 简单安装: 1.下载解压 ... 2.配置JDK,flum ...
- CSS 之 内层div填充margin,外层div的背景色不会覆盖该margin
外层元素(如div)中只有一个非空子元素,此时margin是被折叠了.两者之间取最大的margin值,表现在外层父元素上,而不是内层子元素. 注意: (1)只有垂直方向上才会出现此现象,水平方向不会出 ...
- Wcf 之 配置文件解析
在WCF Service Configuration Editor的使用中,我们通过配置工具自动生成了WCF服务端的config文件.现在我们来看下这个配置文件各个标签的意义(解释在下面xml文件中的 ...
- jquery相关代码
1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text ...
- HDU 1875 畅通工程再续 (最小生成树)
畅通工程再续 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- 1369 xth 砍树
1369 xth 砍树 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解 题目描述 Description 在一个凉爽的夏夜,xth 和 ...
- linux两台服务无密通信
一台新linux需要做两台服务器无密通信. 首先ssh-kengen -t rsa(非对称算法) 回车 一路回车即可 #cd /root/.ssh #ssh-copy-id -i id_rsa.pub ...
- html5 Canvas API
详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...
- ASP.NET缓存全解析4：应用程序数据缓存 转自网络原文作者李天平
System.Web.Caching 命名空间提供用于缓存服务器上常用数据的类.此命名空间包括 Cache 类,该类是一个字典,您可以在其中存储任意数据对象,如哈希表和数据集.它还为这些对象提供了失效 ...