- 浏览: 267057 次
- 性别:
- 来自: 合肥
文章分类
最新评论
-
fjyuxuebin:
怎么调用,有调用demo吗?
jquery 异步treeTable树形插件 -
anyone:
非常不错的插件
jquery 异步treeTable树形插件 -
孤心随云:
看起来不错!试一下先!
jquery 异步treeTable树形插件 -
iwq1990512:
最后Java代码,返回的不是json数据吧
jquery 异步treeTable树形插件 -
dengli19881102:
可以把整个代码提供么?
jquery 异步treeTable树形插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="utf-8" /> <title>ja table tree</title> <link href="${resourcePath}/css/manage.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="${resourcePath}/js/easyui/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="${resourcePath}/js/easyui/themes/icon.css" /> <script type="text/javascript" src="${resourcePath}/js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="${resourcePath}/js/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="${resourcePath}/js/easyui/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="${resourcePath}/fixedHeaderTable/css/defaultTheme.css" /> <script type="text/javascript" src="${resourcePath}/fixedHeaderTable/jquery.fixedheadertable.js"></script> <style> .trbg {background:#CCFFFF} </style> <script> var _img ='${resourcePath}/images/_1.gif'; var img ='${resourcePath}/images/1.gif'; var fimg = '${resourcePath}/images/file.gif'; var loadimg ='${resourcePath}/images/loading.gif'; </script> <script type="text/javascript" src="${resourcePath}/js/area.js"></script> <script> function windowHeight() { var de = document.documentElement; return self.innerHeight||(de && de.clientHeight)||document.body.clientHeight; } $(function(){ var p = $("#ddbody").position(); var wh = $("#operate").width();//可视化宽度,需要绑定一个页面中的元素来动态获取 var ht= windowHeight() - p.top;//可视化高度 var pobj = new Object(); pobj.width = wh; pobj.height = ht; pobj.themeClass ='table_list';//表格样式,需要时替换自己的 $('#table_color').fixedHeaderTable(pobj);//注意jquery的版本必须为1.5以上 }); </script> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0" id="content"> <tr> <td valign="top"> <div class="con_box"> <div class="Current_bg margin2"> <div class="Current">当前功能:区域定义管理</div> <div class="Version">版面号:301103</div> <div id="clear"></div> </div> <div class="operate" id="operate"> <div class="operate_left"> <ul> <li><a href="#" onclick="addTopArea();"><span>添加顶级区域</span></li> <li><a href="#" onclick="release();"><span>静态发布</span></li> <li><a href="#" onclick="moveDown(-1);"><span>向下排序</span></li> <li><a href="#" onclick="moveUp();"><span>向上排序</span></li> </ul> </div> <div class="operate_right"><a href="#" onclick="window.location.reload();"><img src="${resourcePath}/images/reload.gif" alt="刷新"/></a> </div> </div> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_list" id="table_color" > <thead id="ddthead" > <tr> <th width="2%">选择</th> <th width="20%">区域名称</th> <th width="10%">区域编码</th> </tr> </thead> <tbody id="ddbody" > </tbody> </table> </div> </td> </tr> </table> <!-- 默认,整个初始化工作区隐藏 --> <div id="allDis" style="display:none;"> <!-- 鼠标右键配置 --> <div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="appendArea()">增加子区域</div> <div onclick="modifyArea()">编辑</div> <div onclick="removeArea()">删除</div> </div> <!-- 新增,修改区域 --> <div id="areaDiv" style="padding: 20px; width: 350px; height: 220px;"> <form action="${contextPath}/arealocal/createArea.xhtml" name="areaForm" id="areaForm" method="post"> <table id="areaFormTable" cellspacing="5" cellpadding="0"> <tr> <td>上级区域:</td> <td id="td_father"> </td> </tr> <tr> <td align="right"><span style="font-size: 12px">区域名称:</span></td> <td><input type="text" class="easyui-validatebox" id="areaName" name='fkArea.areaName' style="width:200px;" maxlength="20" required="true" missingMessage="请输入区域名称"></input></td> </tr> <tr> <td align="right"><span style="font-size: 12px">区域编码:</span></td> <td><input type="text" class="easyui-validatebox" id="areaCode" name='fkArea.areaCode' style="width:200px;" maxlength="20" required="true" missingMessage="请输入区域编码" validType="positive_int"></input></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td colspan="2" align="center"> <a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="doSubmit();">确定</a> <a href="#" class="easyui-linkbutton" icon="icon-redo" onclick="doReset();">重置</a> </td> </tr> </table> <input type="hidden" name="fkArea.id" id="fkAreaId" value="" /> <input type="hidden" name="fkArea.fatherId" id="fatherId" value="" /> <input type="hidden" name="fkArea.sortNum" id="sortNum" value="" /> <input type="hidden" name="fkArea.gradePath" id="gradePath" value="" /> </form> </div> <input type="hidden" name="nodeId" id="nodeId" value="" /> <div id="releaseDiv" style="padding: 20px; width: 350px; height: 220px;" > <form action="${contextPath}/arealocal/updateReleaseArea.xhtml" name="releaseForm" id="releaseForm" method="post"> <table id="releaseFormTable" cellspacing="6" cellpadding="0"> <tr> <td align="right"><span style="font-size: 12px">顶级区划代码:</span></td> <td><input type="text" class="easyui-validatebox" id="areaCodeBegin" name='areaCodeBegin' style="width:150px;" maxlength="20" required="true" missingMessage="请输入顶级区划代码" validType="positive_int"></input></td> </tr> <tr> <td align="right"><span style="font-size: 12px">向下深度:</span></td> <td><input type="text" class="easyui-validatebox" id="releaseDeep" name='releaseDeep' style="width:150px;" maxlength="20" required="true" missingMessage="请输入区域向下深度" validType="positive_int"></input></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td colspan="2" align="center"> <a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="doRelease();">确定</a> <a href="#" class="easyui-linkbutton" icon="icon-redo" onclick="doRReset();">重置</a> </td> </tr> </table> </form> </div> <!-- loading --> <div id="confirm-dialog-modal" style="height:160px;width:320px;"> <p align="center" style="font-size:12px">正在处理中,请稍后...</p> <p align="center"><img src='${resourcePath}/images/b_loading.gif' style='width:100px;height:80px'/></p> </div> </div> </body> </html>
// js cookie 设置 var Cookie={ set:function(name,value,expires,path,domain){ if(typeof expires=="undefined"){ expires=new Date(new Date().getTime()+10*24*3600*1000); } document.cookie=name+"="+escape(value)+((expires)?"; expires="+expires.toUTCString ():"")+((path)?"; path="+path:"; path=/")+((domain)?";domain="+domain:""); }, get:function(name){ var arr=document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); if(arr!=null){ return unescape(arr[2]); } return null; }, clear:function(name,path,domain){ if(this.get(name)){ document.cookie=name+"="+((path)?"; path="+path:"; path=/")+((domain)?"; domain="+domain:"")+";expires=Thu, 01-Jan-1970 00:00:01 UTC "; } } }; //扩展easyui验证 $.extend($.fn.validatebox.defaults.rules, { positive_int:{ validator:function(value,param){ if (value){ return /^[0-9]*[0-9][0-9]*$/.test(value); } else { return true; } }, message:'请输入整数!' } }); //初始化根节点json获取 function getSonJson(pid){ return $.ajax({ url: 'loadAreaByFatherId.xhtml', data:'id='+pid, type:"get", cache:false, async:false, error:function(XMLHttpRequest,textStatus) { alert('获取数据出错'); } }).responseText; } //收缩、展开表格树操作 function addAjaxTreeTr(obj,id){ var trid = $('#tr_'+id); var b_name = trid.attr("name")+"/"; if($(obj).attr('src').indexOf(_img)>-1){//收缩表格树 $("[name^='"+b_name+"']").not(trid).each(function(){ //记录收缩前的表格状态 if($(this).is(':visible')){ Cookie.set(trid.attr('id') + $(this).attr('id'),"visible"); }else{ Cookie.set(trid.attr('id') + $(this).attr('id'),"hidden"); } $(this).hide(); }); $(obj).attr('src',img); } else if($(obj).attr('src').indexOf(img)>-1){ //展开表格树 var isNotload = false; //是否已经延迟加载 if(trid.next().length == 0){ isNotload = true; } else{ if($("[name^='"+b_name+"']").not(trid).length ==0){ isNotload = true; }else{//若已经加载过了无需再次加载,展开时需要从cookies中判断收缩前的状态 $("[name^='"+b_name+"']").not(trid).each(function(){ var tr_cook = Cookie.get(trid.attr('id') + $(this).attr('id')); if(tr_cook == null || tr_cook == "visible"){ $(this).show(); } }); $(obj).attr('src',_img); } } if(isNotload){//异步加载表格树 $(obj).attr('src',loadimg); $.ajax({ url: 'loadAreaByFatherId.xhtml', data:'id='+id, type:"get", cache:false, success: function(data){ trid.after(parseJsonToHtml(data)); $(obj).attr('src',_img); contextMenu(); }, error: function(){ alert('没有查询权限!'); } }); } } } function parseJsonToHtml(J){ var j_length = $(eval(J)).length; if(j_length == 0) return ''; var html=''; $(eval(J)).each(function(i){ var id = this[0]; var fatherId = this[1]; var areaName = this[2]; var areaCode = this[3]; var gradePath = this[4]; var level = gradePath.split('/').length -1; var sortNum = this[5]; var sonnum = Number(this[6]); html +='<tr id="tr_'+id+'" level="'+level+'" name="'+gradePath+'" onclick="setBgColor(this);">'; html +='<td><input type="checkbox" name="check_'+gradePath+'" onclick="setCheck(this)"></td>'; if(sonnum > 0){ html +='<td id="name_'+id+'" > <input type="hidden" id="num_'+id+'" value="'+sortNum+'" /><span style="margin-left:'+(level*20)+'px;"></span><img id="img_'+id+'" src="'+img+'" style="cursor:pointer;" onclick="addAjaxTreeTr(this,'+id+');" border="0"/> '+areaName+'</td>'; }else{ html +='<td id="name_'+id+'" > <input type="hidden" id="num_'+id+'" value="'+sortNum+'" /><span style="margin-left:'+(level*20)+'px;"></span><img id="" src="'+fimg+'" border="0" /> '+areaName+'</td>'; } html +='<td>'+areaCode+'</td>'; html +='</tr>'; }); return html; } function setCheck(obj){ var _thisName = $(obj).attr('name')+'/'; if($(obj).attr("checked")){ $("[name^='"+_thisName+"']").attr("checked",true); }else{ $("[name^='"+_thisName+"']").attr("checked",false); } } function setBgColor(obj){ $("#ddbody tr").removeClass("trbg"); $(obj).addClass("trbg"); } $(function(){ $('#ddbody').append(parseJsonToHtml(getSonJson(-1))); //初始化根节点 contextMenu(); //初始化右键菜单 setDialogInit(); //dialog 初始化 }); //绑定右键操作 function contextMenu(){ $('#ddbody tr').bind('contextmenu',function(e){ $('#nodeId').val($(e.target).parent('tr').eq(0).attr('id').replace('tr_','')); $('#mm').menu('show', { left: e.pageX, top: e.pageY }); return false; }); } //增加顶级区域 function addTopArea(){ doReset(); $('#areaDiv').dialog('setTitle','添加顶级区域'); $('#fatherId').val(-1); //顶级区域默认父级 -1 $('#td_father').html('<font color="#666666">顶级区域</font>'); $('#areaForm').attr('action','createArea.xhtml'); $('#areaDiv').dialog('open'); } //增加子区域 function appendArea(){ doReset(); $('#areaDiv').dialog('setTitle','添加子区域'); var fatherId = $('#nodeId').val(); var fname= $('#name_'+fatherId).text(); $('#td_father').html('<font color="#666666">'+fname+'</font>'); $('#fatherId').val(fatherId); $('#areaForm').attr('action','createArea.xhtml'); $('#areaDiv').dialog('open'); } //修改区域 function modifyArea(){ doReset(); $('#areaDiv').dialog('setTitle','修改区域'); var id = $('#nodeId').val(); $.ajax({ url: 'loadTreeNode.xhtml', data:'nodeId='+id, type:"get", cache:false, dateType:"json", async:false, error:function(XMLHttpRequest,textStatus) { alert('你没有查询的权限!'); }, success: function(res){ var aid = res.nodeId; var areaName = res.areaName; var fatherId = res.fatherId; var areaCode = res.areaCode; var sortNum = res.sortNum; var gradePath = res.gradePath; var fname =''; if(fatherId == -1)fname ='顶级区域'; else fname= $('#name_'+fatherId).text(); $('#td_father').html('<font color="#666666">'+fname+'</font>'); $('#fkAreaId').val(aid); $('#areaName').val(areaName); $('#fatherId').val(fatherId); $('#areaCode').val(areaCode); $('#sortNum').val(sortNum); $('#gradePath').val(gradePath); $('#areaForm').attr('action','updateTreeNode.xhtml'); $('#areaDiv').dialog('open'); } }); } //删除区域 function removeArea(){ var id = $('#nodeId').val(); $.messager.confirm('操作提示', '你确认要删除此区域吗?', function(r) { if (r) { $.ajax({ url: 'deleteTreeNode.xhtml', data:'nodeId='+id, type:"post", cache:false, dateType:"json", async:false,//false=同步调用 error:function(XMLHttpRequest,textStatus) { alert('你没有删除的权限!'); }, success: function(response){ if(response){ $.messager.alert('操作提示','删除成功!','info'); window.location.href="loadAreas.xhtml"; } else{ $.messager.alert('操作提示','请先删除子区域!','info'); } } }); } }); } //弹出窗口初始化 function setDialogInit(){ $('#releaseDiv,#areaDiv,#confirm-dialog-modal').dialog({ title : '新增区域', modal: true, //模式窗口:窗口背景不可操作 collapsible : true, //可折叠,点击窗口右上角折叠图标将内容折叠起来 resizable : true, //可拖动边框大小 closed: true, //默认隐藏dialog draggable:false, closable : true //不提供关闭窗口按钮 }); } //同级节点向上移动 function moveUp(){ var trid = $('.trbg'); if(trid.length ==0 ){ $.messager.alert('操作提示','请选择要移动的行!','info'); return; } var level = trid.attr('level'); var tsonAll = trid.prevUntil("tr[level='"+level+"']"); //遇到同级别的level为止 var ptr; if(tsonAll.length == 0){ ptr = trid.prev(); }else{ ptr = tsonAll.last().prev(); } if(ptr.length ==0 ){ $.messager.alert('操作提示','已经到头了!','info'); return; } moveDown(ptr.attr('id').replace('tr_','')); } //同级节点向下移动 function moveDown(val){ var id = -1; if(val == -1) { var trid = $('.trbg'); if(trid.length ==0 ){ $.messager.alert('操作提示','请选择要移动的行!','info'); return; } id= trid.attr('id').replace('tr_',''); }else{ id =val; var trid = $('#tr_'+id); } var level = trid.attr('level'); var tsonAll = trid.nextUntil("tr[level='"+level+"']"); //遇到同级别的level为止(可能已经延迟加载过) var ntr; if(tsonAll.length == 0){ //没有异步加载过该节点 ntr = trid.next(); }else{ ntr = tsonAll.last().next(); } if(ntr.length ==0 ){ $.messager.alert('操作提示','已经到头了!','info'); return; } var nid = ntr.attr('id').replace('tr_',''); var num_id = $('#num_'+id).val(); var num_nid = $('#num_'+nid).val(); var swapnum = id +','+num_id+'|'+nid+','+num_nid; $.ajax({ url: 'updateSwapNum.xhtml', data:'swapnum='+swapnum, type:"post", cache:false, success: function(res){ if(eval(res)){ $('#num_'+id).val(num_nid); //由于是异步,交换隐藏sortnum $('#num_'+nid).val(num_id); var nsonAll = ntr.nextUntil("tr[level='"+level+"']");//判断被交换的节点是否已经异步加载过子节点,交换时子节点一同交换移动 if(tsonAll.length == 0 && nsonAll.length == 0 ){ ntr.insertBefore(trid); } else if( tsonAll.length>0 && nsonAll.length == 0){ tsonAll.each(function(){ ntr.insertBefore($(this)); }); ntr.insertBefore(trid); } else if(tsonAll.length == 0 && nsonAll.length > 0){ ntr.insertBefore(trid); nsonAll.each(function(){ $(this).insertBefore(trid); }); } else if(tsonAll.length > 0 && nsonAll.length > 0){ tsonAll.each(function(){ ntr.insertBefore($(this)); }); ntr.insertBefore(trid); nsonAll.each(function(){ $pthis = $(this); tsonAll.each(function(){ $pthis.insertBefore($(this)); }); $pthis.insertBefore(trid); }); } }else{ alert('更新顺序出错!'); } }, error: function(){ alert('没有更新顺序权限!'); } }); } function doSubmit(){ var validateResult = true; $('#areaFormTable input').each(function () { if ($(this).attr('required') || $(this).attr('validType')) { if (!$(this).validatebox('isValid')) { //如果验证不通过,则返回false validateResult = false; return; } } }); if(validateResult==false){ return; } document.getElementById("areaForm").submit(); } function doReset(){ $("#areaName").val(""); $("#areaCode").val(""); } function release(){ doRReset(); $('#releaseDiv').dialog('setTitle','静态发布'); $('#releaseDiv').dialog('open'); } function doRelease(){ var validateResult = true; $('#releaseFormTable input').each(function () { if ($(this).attr('required') || $(this).attr('validType')) { if (!$(this).validatebox('isValid')) { validateResult = false; return; } } }); if(validateResult==false){ return; } $('#confirm-dialog-modal').dialog('setTitle','发布区域'); $('#confirm-dialog-modal').dialog('open'); $.ajax({ url: 'updateReleaseArea.xhtml', data:{"areaCodeBegin":$('#areaCodeBegin').val(),"releaseDeep":$('#releaseDeep').val()}, type:"post", cache:false, error:function(XMLHttpRequest,textStatus) { $.messager.alert('操作提示','你没有发布的权限!','info'); $('#confirm-dialog-modal').dialog('close'); $('#releaseDiv').dialog('close'); }, success: function(response){ if(eval(response)){ $.messager.alert('操作提示','发布成功!','info'); $('#confirm-dialog-modal').dialog('close'); $('#releaseDiv').dialog('close'); } else{ $.messager.alert('操作提示','发布失败!','info'); $('#confirm-dialog-modal').dialog('close'); $('#releaseDiv').dialog('close'); } } }); } function doRReset(){ $("#areaCodeBegin").val(""); $("#releaseDeep").val(""); }
jquery 表头固定插件
- fixedHeaderTable.rar (15 KB)
- 下载次数: 49
发表评论
-
my97
2012-03-15 16:31 01、 <input type="text& ... -
js table sort
2011-08-06 12:35 1301一、使用 <script src="${r ... -
js 表单布局设计器
2011-08-06 11:23 2599<html xmlns="http:/ ... -
屏蔽鼠标右键
2011-04-05 13:49 933<script language="jav ... -
双击网页向上滚动
2011-04-05 13:45 983var currentpos,timer; funct ... -
js居中弹出层
2010-06-16 08:49 14961:jsp页面片段 <script type=&qu ... -
jquery 可伸缩的无限级列表行
2010-03-11 09:00 21351. jsp页面 <table cellspac ... -
js 随滚动条移动的弹出层
2010-03-10 20:04 4698<html> <head> ... -
设为首页及收藏
2009-12-16 11:21 9911.设为首页 //设为首页 function setHo ... -
自定义网页图片的大小
2009-12-16 08:49 1513用户上传的图片可能过大,可以用此限定。 Html: < ... -
图片滚动
2009-12-11 15:23 11551. <div id="demo" ...
相关推荐
TableTree4J 是一个开源的基于javascript的树状菜单和表格控件 使用TableTree4J可以轻易实现带树状折叠效果的表格和树状折叠菜单 目前TableTree4J版本为1.1Re版,支持一下功能 1.多种模式切换,样式更改...
2010-6-13日正式发布,时隔两年,众多网友要求我升级 tabletree4j,终于有少少空余时间完成了beta版本发布 对比之前的版本本次更新包括以下内容: 1.完整的包命名空间 2.自定义header footer 3.动态添加节点/...
tabletree js 树形结构
使用js写的 表格树 另外开发了 js甘特图。 里面附加封装前的代码,开起来容易理解易于学习。 贴出来分享一下。
bootstraptable-treeview.js 表格文件 来自github 大佬写的
bootstrap-table-tree.js对bootstrap-table中某些方法进行重写。
mtree1.0-checkbox-tableTree-带复选框树形控件,带复选框 支持表格转换为树形表格,使用简单。希望对各位有用,同时也望各位朋友提供更多更好的改进建议!
WebTable可以在网页上实现一个表格的增删改操作,并支持树型目录,简化用户对HTML和Javascript的编写。用户可以自定义各个表格列的类型(如文本、长度、数字型等),可以自定义各个表格列的输入方式(如文本框、...
近日,需要做一个关于Service的Mapping, 因为排版的需要,需要一个TreeTable,我们用的js框架是dojo,但是定制dojo(1.4)很困难,且我们这个tree table不需要太多的功能,所以最终决定自己实现一个,API类似于dojo的...
2022/09/02更新: 下边网友发现有新的方案:...table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖:npm i -S vuedraggable@next
mtree1.0是基于javascript的树形控件,主要实现了基本树形控件和树形表格功能,可以使用复选框(checkbox)。 代码简洁,调用方法简单,容易上手。 由于受dtree影响较深,里面的编程思想抹不去dtree的影子,我也希望我...
简介: 本书旨在用预防、检测和处理攻击计算机系统和网络的恶意代码所需的工具和技术来武装你。书中讨论了如何预先保证系统安全,以防止这样的攻击;如何发现渗透进你的防御系统的恶意代码;如何分析随时都有可能遇.....
vue-ads-table-tree Vue ads表树是vue js表组件,具有树功能。 以下是此表所有功能的列表:过滤器vue-ads-table-tree Vue ads表树是vue js表组件,具有树功能。 这是此表的所有功能的列表:根据特定列或所有列的行值...
jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置,完美兼容IE,FireFox,Google Chrome浏览器。
最近在网上找了个tree.js学习了一下,学习之余,改造了一下,使之用table方法显示tree,加以注释,希望能对初学者有用.之所用dtreetable.js名字,因为网上已现tabletree.js
带树网格的VUE表 Vue.js 2.0的表格(带有树网格)组件。 (其样式扩展了 ) 例 安装 使用npm: npm i vue-table-with-tree-grid -S 或使用纱线: ...import ZkTable from 'vue-table-with-tree-grid'
//仅提供js代码 //这里使用的easyui1.3.6 //解决的问题是Tree控件的checkbox不能设置为不允许用户勾选 //设置一个标志位,在整棵树加载完成后就将标志位设置为false,不允许勾选checkbox了,在加载数据完成之前是...
layui树形表格treetable.js插件,基于layui第三方开发的一款树形表格插件,很实用。
However, if a node has just been created and not yet added to the tree, or if it has been removed from the tree, this is null. 很简单,就是节点的父节点,看过dom都知道。 再看看比较容易区分的...