支持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. ...
随机推荐
- The Socket API, Part 5: SCTP
转:http://www.linuxforu.com/2011/12/socket-api-part-5-sctp/ By Pankaj Tanwar on December 29, 2011 in ...
- JSON使用——获取网页返回结果是Json的代码
public String getWebData(String strUrl){ String json = null; try { URL url = new URL(strUrl); HttpUR ...
- myecplise 打开报错 Errors occurred during the build. Errors running builder 'DeploymentBuilder' on project 'myf'. Java.lang.NullPointerException
Errors occurred during the build. Errors running builder 'DeploymentBuilder' on project 'myf'.Java.l ...
- solr--搜索参数随笔
1.默认搜索域.查询域的关系 qf字段的配置:query fields,指定solr从哪些field中搜索 在solrj中设置如下: params.setParam("qf", & ...
- ReentrantLock类的基本结构
ReentrantLock类是一个可重入互斥锁,它具有与使用synchronized()方法和语句访问隐式监视器锁相同的基本行为和语义,但是它的功能更强大.ReentrantLock由最近成功获得锁但 ...
- 【转】使用断言NSAssert()调试程序错误
NSAssert()只是一个宏,用于开发阶段调试程序中的Bug,通过为NSAssert()传递条件表达式来断定是否属于Bug,满足条件返回真值,程序继续运行,如果返回假值,则抛出异常,并切可以自定义异 ...
- TinyThread源码分析之中断
转载请注明来源:cuixiaolei的技术博客 https://github.com/xhawk18/TinyThread TinyThread 是基于Cortex-M0的小型的OS. 知识储备: I ...
- VMware系统运维（五）安装SSO vCenter Single Sign-On
1.前面我们做了很多准备工作,安装了很多需求部件,这时候再安装,必备条件无,这是简单安装,即自动安装,点击"安装". 2.简单安装,提示内存不足,需要4GB以上,加内存,重新安装. ...
- 转: 关于 ssl的建立链接的过程
转自: http://www.ruanyifeng.com/blog/2014/02/ssl_tls.html SSL/TLS协议运行机制的概述 作者: 阮一峰 日期: 2014年2月 5日 互 ...
- The Art of Computer Programming
<计算机程序设计艺术>即<The Art of Computer Programming>是计算机领域里颠峰级的里程碑,加上国外人士对它的推崇,所以提起它的大名简直就象法律书籍 ...