下载文档原格式
web前端培训教程：jQuery插件库插件(Plugin)也成为jQuery 扩展(Extension)，是一种遵循一定规范的应用程序接口编写出来的程序。
目前jQuery 插件已超过几千种，由来自世界各地的开发者共同编写、验证和完善。
而对于jQuery 开发者而言，直接使用这些插件将快速稳定架构系统，节约项目成本。
一．插件概述插件是以jQuery 的核心代码为基础，编写出复合一定规范的应用程序。
也就是说，插件也是jQuery 代码，通过js 文件引入的方式植入即可。
插件的种类很多，主要大致可以分为：UI 类、表单及验证类、输入类、特效类、Ajax 类、滑动类、图形图像类、导航类、综合工具类、动画类等等。
引入插件是需要一定步骤的，基本如下：1.必须先引入jquery.js 文件，而且在所有插件之前引入；2.引入插件；3.引入插件的周边，比如皮肤、中文包等。
二．验证插件Validate.js 是jQuery 比较优秀的表单验证插件之一。
这个插件有两个js 文件，一个是主文件，一个是中文包文件。
使用的时候，可以使用min 版本；在这里，为了教学，我们未压缩版本。
验证插件包含的两个文件分别为：jquery.validate.js 和jquery.validate.messages_zh.js。
//HTML 内容<script type="text/javascript" src="jquery.validate.js"></script><script type="text/javascript" src="jquery.validate.messages_zh.js"></script> <form><p>用户名：<input type="text" class="required" name="username" minlength="2" />*</p><p>电子邮件：<input type="text" class="required email" name="email" /> *</p><p>网址：<input type="text" class="url" name="url" /></p><p><input type="submit" value="提交" /></p></form>//jQuery 代码$(function () { $('form').validate();});只要通过form 元素的jQuery 对象调用validate()方法，就可以实现“必填”、“不能小于两位”、“电子邮件不正确”、“网址不正确”等验证效果。
JavaScript jQuery 插件开发jQuery 插件开发其实很简单jQuery已经被广泛使用，凭借其简洁的API，对DOM强大的操控性，易扩展性越来越受到web开发人员的喜爱，我在社区也发布了很多的jQuery插件经常有人询问一些技巧，因此干脆写这么一篇文章给各位jQuery爱好者，算是抛砖引玉吧。
【基础】a)样式很多人会认为样式是个很复杂的东西，需要沉着冷静的心态加上非凡的审美观才能设计出赏心悦目的UI，抛开图片设计不说，其实css也就是那么些属性：position,margin,paddi ng,width,height,left,top,float,border,background...UI设计的漂亮与否在很大程度上依赖于设计人员对配色的把握和整体效果的协调。
举个简单的例子，一个简单的页面，马虎的人：复制代码代码如下:<html xmlns="/1999/xhtml"><head><title>Test Page</title></head><body>jQuery是一个框架！压缩后有30多k吧。
</body></html>细心的人：复制代码代码如下:<html xmlns="/1999/xhtml"><head><title>Test Page</title><style type="text/css">body{font-family:'宋体';font-size:12px;}</style></head><body>jQuery是一个框架！压缩后有30多k吧。
</body></html>专心的人：[Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 我们对比一下三者的UI效果：一目了然，或许很多的站点失去关注正是因为这不起眼的font-family,font-size。
10个免费的jQuery可视化编辑器插件⽂本编辑器，也就是所见即所得的HTML编辑器，是⽹站⼀个⾮常重要的组件，特别是对于⼀些内容发布⽹站来说。
本⽂介绍10个基于jQuery的可视化⽂本编辑器。
1.MarkitUpmarkItUp!并不是全功能的编辑器，它是⼀个⾮常轻量级、可定制的灵活引擎，适合CMS、博客、论坛等⽹站。
makrItUp并不是所见即所得的，以后也不会是。
demo / source2.jWYSIWYG这是⼀个内嵌的内容编辑器，可直接编辑HTML内容，并具备所见即所得的效果，该插件体积⾮常⼩，只有不到26K。
demo / source3.RTE jQuery该编辑器同样⾮常⼩⽽且易⽤，并可根据需要进⾏定制，jquery.rte.js⽂件只有7k（未压缩），兼容主流浏览器（IE6，Firefox 2，Opera 9，Safari 3.03）demo / source4.jHtmlAreajHtmlArea是⼀个简单、轻量级、可扩展、基于jQuery开发的WYSIWYG HTML编辑器。
这个组件可以很⽅便将页⾯中的TextArea标签转换成⼀个WYSIWYG HTML Editor。
整个编辑器包括图⽚和CSS⼤⼩只有22k。
demo / source5.WYMEditorWYMeditor是⼀个基于Web浏览器的可视化HTML编辑器，界⾯如下图所⽰demo / source6.uEditoruEditor是⼀个灵活易⽤的编辑器，⽣成的HTML代码很简单整洁，可通过css定制外观demo / source7.jQuery WYSIWYG Rich Text EditorjQuery Wysiwyg是⼀个易于集成和定制的编辑器，⽀持浏览器：IE6，IE7，IE8，FF3，Opera9，Safari4，Google Chrome2,使⽤MIT授权demo / source8.HtmlBoxHtmlBox是⼀个基于jQuery开发的HTML/XHTML编辑器。
本文由我司收集整编，推荐下载，如有疑问，请与我司联系jQuery 插件汇总（待添加）2013/10/08 0 jQuery 插件jQuery Spin Button 自定义文本框数自增或自减jQuery 插件JQuery Pager 分页器实现javascript 分页功能jQuery 插件FontSizer 实现Javascript 自定义动态调整网页文字大小jQuery 插件Magnify 放大镜实现javascript 图片放大功能jQuery 插件tooltip 提示条实现Javascript 动态文字或图片提示效果jQuery 插件Step Carousel Viewer 实现Javascript 图片滑动旋转效果jQuery 插件accordion 折叠菜单实现Javascript 展开收缩菜单功能jQuery 插件ImageFlyout 弹出图片实现javascript 放大图片功能jQuery 插件SmoothNavigationalMenu 导航菜单实现Javascript 下拉多级菜单功能jQuery 插件PiroBox 弹出图片盒实现Javascript 新窗口全屏图片展示功能jQuery 插件CalendarWidget 日历工具实现Javascript 简单日历功能jQuery 插件Datepicker 日期选择器实现Javascript 自定义日期时间选择功能jQuery 插件TableSearch 表搜索实现Javascript 搜索表内容功能jQuery 插件floatbox 浮动层实现javascript 弹出浮动窗口功能jQuery 插件timers 定时器实现javascrip 定时或按钮控制功能jQuery 插件absolutizePrototypePort 实现Javascript 绝对定位jQuery 插件$.event.special.drag 拖动实现javascript 随意定制拖动功能jQuery 插件smartFocus 实现javascript 文本框blur 焦点显示或隐藏默认效果jQuery 插件AjaxFileUpload 文件上传实现Javascript 多文件上传功能jQuery 插件AjaxManager 实现Javascript 自定义ajax 请求和响应时间功能jQuery 插件AjaxQueue 队列实现Javascript 队列或同步请求功能jQuery 插件ajaxContent 实现javascript 通过ajax 获取任意内容jQuery 插件Add2Cart 添加到购物车实现javascript 动态提示添加到购物车效果jQuery 插件animateToClass 实现javascript 自定义动画效果jQuery 插件Lightweight Rich Text Editor 轻量级编辑器jQuery 插件Adjacent 实现动态获取相邻元素增加自定义效果jQuery 插件ColorBox 彩盒实现javascript 自定义灯箱效果jQuery 插件James 实现javascript 自动完成提示功能jQuery 插件Validate 验证表单实现javascript 表单验证功能jQuery 插件Validation 验证表单实现javascript 表单智能验证功能jQuery 插件QuickPaginate 快速分页实现javascript 分页功能jQuery 插。
jQuery制作简单柱状图实例-电脑资料这篇文章主要介绍了jQuery制作简单柱状图的方法,实例分析了html与css布局以及jQuery功能的具体实现方法,需要的朋友可以参考下本文实例讲述了jQuery制作简单柱状图的方法，。
分享给大家供大家参考。
具体实现方法如下：Html部分：代码如下:CSS部分：代码如下:/*以下为柱状图样式*/.histogram-container{position:relative;margin-left:60px;margin-top:10px;margin-bottom:25px;}.histogram-bg-line{border:#999 solid;border-width:0 0px 1px 1px;border-right-color:#eee;overflow:hidden;width:99%;} .histogram-bg-line ul{overflow:hidden;border:#eee solid;border-width:1px 0 0 0;clear:both;}.histogram-bg-lineli{float:left;overflow:hidden;background:#fff;}.histogram-bg-line li div{border-right:1px #eee solid;}.histogram-content{position:absolute;left:0px;top:0;width:99%;height:100%;} .histogram-content ul{height:100%;}.histogram-content li{float:left;height:100%;text-align:center;position:relative;}.histogram-box{position:relative;display:inline-block;height:100%;width:20px;}.histogram-content li a{position:absolute;bottom:0;right:0;display:block;width:20px;fo nt-size:0;line-height:0;}.histogram-content li .histogram-name{position:absolute;bottom:-20px;left:0px;white-space:nowrap;display:inline-block;width:100%;font-size:12px;overflow:hidden;}.histogram-y{position:absolute;left:-60px;top:-10px;font:12px/1.8 verdana,arial;}.histogram-y li{text-align:right;width:55px;padding-right:5px;color:#333;}.histogram-bg-line li div,.histogram-y li{height:30px;/*控制单元格的高度及百分比的高度，使百分数与线条对其*/}Js部分：代码如下:$(function(){var dataArr={"data":[{"id":1,"name":"百度","per":"10"},{"id":2,"name":"腾讯","per":"20"},{"id":3,"name":"新浪","per":"10"},{"id":4,"name":"网易","per":"44"},{"id":5,"name":"搜狐","per":"50"},{"id":5,"name":"小虾虎鱼","per":"69"},{"id":5,"name":"人人网","per":"72"},{"id":5,"name":"爱奇艺","per":"88"},{"id":5,"name":"奇虎360","per":"92"},{"id":5,"name":"阿里巴巴","per":"15"},{"id":5,"name":"阿里巴巴","per":"10"}]};new histogram().init(dataArr.data);});function histogram(){var controls={};var bgColor=new Array("#666666","#21AA7C","#2277BB","#dc7644","#BBAA22"," #AA22AA","#338800","#1099EE","#ffcc33","#ED3810");this.init=function(data,y){setControls();buildHtml(data,y);}function setControls(){controls.histogramContainer=$("#histogram-container");controls.histogramBgLineUL=controls.histogramContainer.c hildren("div.histogram-bg-line");controls.histogramContentUL=controls.histogramContainer. children("div.histogram-content");controls.histogramY=controls.histogramContainer.children(" div.histogram-y");}function buildHtml(data,y){var len=data.length,perArr=new Array(),maxNum,maxTotal,yStr=‘‘;var contentStr=‘‘,bgLineStr=‘‘,bgLineAll=‘‘;var widthPer=Math.floor(100/len);minWidth=len*21+60;controls.histogramContainer.css("min-width",minWidth+"px");for(var a=0;a<len;a++){< p=""></len;a++){<>perArr[a]=parseInt(data[a][‘per‘]);}maxNum=String(perArr.max());if(maxNum.length>2){var x=parseInt(maxNum.substr(maxNum.length-2,1))+1;maxTotal=Math.floor(parseInt(maxNum/100))*100+x*10;}else{maxTotal=Math.floor(parseInt(maxNum/10))*10+10;}//y轴部分if(y=="%"){yStr+=‘100%80%60%40%20%0%‘;}else{var avg=maxTotal/5;for(i=5;i>=0;i--){yStr+=‘‘+avg*i+‘‘;}}//柱状条部分for(var i=0;i<len;i++){< p=""></len;i++){<>var per=Math.floor(parseInt(data[i][‘per‘])/maxTotal*100);var n=Math.floor(parseInt(per)/10);contentStr+=‘‘;contentStr+=‘‘+data[i][‘name‘]+‘‘;contentStr+=‘‘;bgLineStr+=‘‘;}//背景方格部分for(var j=0;j<5;j++){bgLineAll+=‘‘+bgLineStr+‘‘;}bgLineAll=‘‘+bgLineAll+‘‘;contentStr=‘‘+contentStr+‘‘;yStr=‘‘+yStr+‘‘;controls.histogramContainer.html(bgLineAll+contentStr+ySt r);controls.histogramContainer.css("height",controls.histogram Container.height()+"px");//主要是解决IE6中的问题}}Array.prototype.max = function(){//最大值return Math.max.apply({},this)}希望本文所述对大家的jQuery程序设计有所帮助，电脑资料《jQuery制作简单柱状图实例》(https://www.)。
JQuery常用插件1．报表插件jqPlot案例一：2．表格插件table表格由于它的浏览器兼容性和复杂的标签嵌套方式，可以算是添加样式最困难的对象之一了。
大多数前端er都把网页中的table标签替换为div，主要就是因为div要比table 更容易添加CSS样式。
但是我们在日常应用中仍然要用到table表格，其中最好的例子就是对照表。
这里推荐15个jQuery表格插件让你对数据表格进行显示、排序、筛选和操控。
如jQuery表格排序插件、jQuery表格拖拽插件、jQuery树形表格插件、设置颜色、点击、替换等效果。
1.DataTables-强大的jQuery表格插件DataTables是提供了大量特性的强大jQuery表格插件。
例如:你可以自动轻松筛选、Ajax预读取数据、分页、列排序、高亮排序列、扩展插件支持、使用CSS或jQuery UI ThemeRoller 定制主题和完整文档。
2.uiTableFilter-jQuery表格过滤插件uiTableFilter是一个用于表格行筛选的jQuery插件。
插件作者提供了详细的例子来告诉大家如何将自己的表格和插件整合在一起并完成表格筛选。
3.Scrollable HTML Table-jQuery表格滚动插件Scrollable HTML Table jQuery插件可以让你的表格变得可以滚动控制。
4.Tablesorter-jQuery表格排序插件Tablesorter这个jQuery插件是用来将一个包含thead和tbody标签的标准HTML表格转变为无页面刷新的可排序表格。
它不但支持多列排序，而且跨浏览器兼容并且能通过widget系统进行扩展。
5.Flexigrid-Web2.0 jQuery表格插件Flexigrid 是一个轻量级的Web2.0 jQuery插件。
它包含很多非常Cool的特性，如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。
jquery.jsPlumb实现拓扑图基于jquery.jsPlumb编写拓扑图，供⼤家参考，具体内容如下要求：实现公司组织结构拓扑关系，可展开，可收拢；动态数据展⽰；叶⼦节点可点击；实现办法：1 国内还有⼀个插件也⽐较简单，但是该插件只能全部展开，并不能收拢，放弃了该办法；2 最后选择了这个插件，因为相关资料很少，所以每步都是⾃⼰摸索出来的；对数据的要求：因为该插件的每个节点都是⼀个具有独⽴不同id的div模块，所以json数据要求有⼀个id属性，并且所有的id都要不⼀样；实现的原理：1 先定位所有的节点（这个还简单点，只要依次遍历数据就⾏）；2 添加拓扑关系；（这个地⽅⽐较复杂，尤其是点击节点时，其他节点收缩，直接点展开，⾥⾯的循环量特别⼤，⼏乎都是在⼀个⼤循环⾥⾯套⽤了很多的⼦循环）1 html部分（注意事项，⾥⾯的图⽚⾃⼰设置）<!DOCTYPE html><html><head><meta charset="utf-8"><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript" src="scripts/jquery.jsPlumb-1.4.0-all.js"></script><script type="text/javascript" src="scripts/test.js"></script><style type="text/css">.rootNode {// background-color: #79deff;width: 36px;height: 36px;position: absolute;background-image: url(images/monitor_server.png);background-size: 32px 32px;background-repeat: no-repeat;background-position:center;/* -webkit-box-shadow: #909090 0px 0px 10px;-moz-box-shadow: #909090 0px 0px 10px;box-shadow: #909090 0px 0px 10px;*/}.instanceNode {// background-color: #50d4ff;width: 36px;height: 36px;position: absolute;background-image: url(images/instance_big.png);background-size: 32px 32px;background-repeat: no-repeat;background-position:center;-moz-background-size: 32px 32px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/instance_big.png', sizingMethod='scale')\9;-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/instance_big.png',sizingMethod='scale')"\9;cursor:pointer;/* -webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px; */}.instanceNode_leaf {// background-color: #50d4ff;width: 36px;height: 36px;position: absolute;background-image: url(images/user_online.png);background-size: 32px 32px;background-repeat: no-repeat;background-position:center;-moz-background-size: 32px 32px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/user_online.png', sizingMethod='scale')\9;-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/user_online.png',sizingMethod='scale')"\9;cursor:pointer;/* -webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px; */}.nodeWord{//font-weight: bold;font-size: 12px;color:white;text-align: center;position: absolute;bottom: -20px;width: 100%;}.cursorEndpoint{cursor:pointer;}body{background:#27363F;}</style></head><body style="overflow: scroll;"><div id="top_server" class="rootNode"><div style=""></div></div></body></html>2 test.jsvar tree_json=[{"id": "1","text": "国核院","iconCls": "icon-org","state": "closed","children": [{"id": "2","text": "⼟⽊⼯程部","iconCls": "icon-org","state": "closed","children": [{"id": "3","text": "科室⼀","iconCls": "icon-org","state": "closed","children": [{"id": "4","text": "u110","iconCls": "icon-man"},{"id": "5","text": "u120","iconCls": "icon-man"},{"id": "51","text": "u120","iconCls": "icon-man"}]},{"id": "6","text": "财务","iconCls": "icon-org","state": "closed","children": [{"id": "7","text": "u111","iconCls": "icon-man"},{"id": "71","text": "u111","iconCls": "icon-man"}]}]},{"id": "8","text": "建筑⼯程部","iconCls": "icon-org","state": "closed","children": [{"id": "9","text": "科室⼀","iconCls": "icon-org","state": "closed",},{"id": "11","text": "财务","iconCls": "icon-org","state": "closed","children": [{"id": "12","text": "u114","iconCls": "icon-man"}]}]},{"id": "13","text": "综合室","iconCls": "icon-org","state": "closed","children": [{"id": "14","text": "u113","iconCls": "icon-man"},{"id": "141","text": "u113","iconCls": "icon-man"}]},{"id": "15","text": "重庆公司","iconCls": "icon-org","state": "closed","children": [{"id": "16","text": "⼟⽊⼯程部","iconCls": "icon-org","state": "closed","children": [{"id": "17","text": "科室⼀","iconCls": "icon-org","state": "closed","children": [{"id": "18","text": "u115","iconCls": "icon-man" }]},{"id": "19","text": "财务","iconCls": "icon-org","state": "closed","children": [{"id": "20","text": "张⽂涛","iconCls": "icon-man"}]}]},{"id": "21","text": "建筑⼯程部","iconCls": "icon-org","state": "closed","children": [{"id": "24","text": "财务","iconCls": "icon-org","state": "closed","children": [{"id": "25","text": "李⼩进","iconCls": "icon-man"}]}]}]}]}];$.ajax({url: 'scripts/text.json',type: 'GET',dataType: 'json',data: {},}).done(function() {console.log("success");myjson=tree_json;showTopo();}).fail(function() {console.log("error");}).always(function() {console.log("complete");});function showTopo(){$("#top_server").css({"left":"50%","top":"5%"});$(document).on({mouseover:function(){$(this).css({"background-color":"#79deff","box-shadow":"#909090 0px 0px 10px", "-webkit-box-shadow": "#909090 0px 0px 10px","-moz-box-shadow": "#909090 0px 0px 10px"});},mouseout:function(){$(this).css({"background-color":"","box-shadow":"","-webkit-box-shadow": "","-moz-box-shadow": ""});},click:function(){alert($(this).text());}},".instanceNode_leaf");var company=myjson[0]["children"]; //初始化公司数组var companyNumber=company.length; //var company_department_arr=[]; //获取部门数组var company_department_sec_arr=[]; //获取科室数组//元素的摆放先摆放公司部门科室员⼯if(tree_json[0].hasOwnProperty("children")){elementLocation(company,companyNumber);}//开始定义连线和点击事件jsPlumb.ready(function() {jsPlumb.draggable("top_server"); //定义可拖拽var hoverPaintStyle = { lineWidth:2,strokeStyle:"#dedede" }; //⿏标经过时线宽度和颜⾊jsPlumb.importDefaults({DragOptions : { cursor: 'pointer'}, //拖动时⿏标停留在该元素上显⽰指针，通过css控制EndpointStyles : { width:10, height:10,cursor: 'pointer'},//连接点的默认颜⾊Connector : "Straight", //设置连线为直线Endpoint : "Rectangle",//连接点的默认形状Anchor : "Top",//连接点的默认位置MaxConnections:1000,//同上ConnectionsDetachable:false,HoverPaintStyle:hoverPaintStyle});var defaults = {paintStyle:{ fillStyle:"#B4B9C5" },//设置连接点的颜⾊connectorStyle:{ strokeStyle:"#B4B9C5", lineWidth:2 },//连线颜⾊、粗细connector:[ "Flowchart", { stub:[10, 20], gap:5, cornerRadius:2} ],isSource:true,isTarget:true,endpoint:"Blank"};var rootnode={endpoint:["Image", { src:"images/sub.png" }],//设置连接点的形状为圆形paintStyle:{ fillStyle:"#B4B9C5" },//设置连接点的颜⾊connectorStyle:{ strokeStyle:"green", lineWidth:2 },//连线颜⾊、粗细//connector:["Straight",{gap:5}],connector:[ "Flowchart", { stub:[10, 20], gap:10, cornerRadius:2} ],cssClass:"cursorEndpoint"};var s1=jsPlumb.addEndpoint("top_server", {anchor:"Bottom"},rootnode);//根节点设置//添加拓扑关系for(var i=0;i<companyNumber;i++){var company_department=company[i].children; //四个公司下⾯的部门jsPlumb.draggable("instance_"+company[i].id); //设置四个公司可拖拽var s2=jsPlumb.addEndpoint("instance_"+company[i].id,defaults); //设置四个公司的节点 jsPlumb.connect({source:s1, target:s2}); //连接服务器和是个公司;if(company_department.length>0){var s2_root=jsPlumb.addEndpoint("instance_"+company[i].id, {anchor:"Bottom"},rootnode); //把四个公司设置成根节点//对公司绑定click事件s2_root.bind("click", function(endpoint) {if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){endpoint.setParameter("img","sub");endpoint.setImage("images/sub.png");for(var k=0;k<endpoint.connections.length;k++){endpoint.connections[k].setVisible(true);$("#"+endpoint.connections[k].targetId).show();var oid=endpoint.connections[k].targetId.split("_")[1];jsPlumb.show("instance_"+oid,true);}//隐藏其他部门以及部门下的组织for(var m=0;m<company.length;m++){if(endpoint.elementId!="instance_"+company[m].id){var conn=jsPlumb.select({source:"instance_"+company[m].id});for(var n=0;n<conn.length;n++){$("#"+conn.get(n).targetId).hide();jsPlumb.hide(conn.get(n).targetId,true);var oid=conn.get(n).targetId.split("_")[1];var conn_org=jsPlumb.select({source:"instance_"+oid});for(var n1=0;n1<conn_org.length;n1++){$("#"+conn_org.get(n1).targetId).hide();jsPlumb.hide(conn_org.get(n1).targetId,true);var oid_1=conn_org.get(n1).targetId.split("_")[1];var conn_org_l1=jsPlumb.select({source:"instance_"+oid_1});for(var nn1=0;nn1<conn_org_l1.length;nn1++){$("#"+conn_org_l1.get(nn1).targetId).hide();}}}conn.get(0).endpoints[0].setParameter("img","add");conn.get(0).endpoints[0].setImage("images/add.png");conn.setVisible(false);}else{var company_department_orgnize=company[m].children;for(var kk=0;kk<company_department_orgnize.length;kk++){if(company_department_orgnize[kk].hasOwnProperty("children")){jsPlumb.select({source:"instance_"+company_department_orgnize[kk].id}).setVisible(false);jsPlumb.select({source:"instance_"+company_department_orgnize[kk].id}).get(0).endpoints[0].setParameter("img","add"); jsPlumb.select({source:"instance_"+company_department_orgnize[kk].id}).get(0).endpoints[0].setImage("images/add.png"); }}}}}else{endpoint.setParameter("img","add");endpoint.setImage("images/add.png");for(var k=0;k<endpoint.connections.length;k++){endpoint.connections[k].setVisible(false);$("#"+endpoint.connections[k].targetId).hide();jsPlumb.hide(endpoint.connections[k].targetId,true);var oid=endpoint.connections[k].targetId.split("_")[1];var conn_org=jsPlumb.select({source:"instance_"+oid});for(var n1=0;n1<conn_org.length;n1++){$("#"+conn_org.get(n1).targetId).hide();jsPlumb.hide(conn_org.get(n1).targetId,true);var oid_1=conn_org.get(n1).targetId.split("_")[1];var conn_org_l1=jsPlumb.select({source:"instance_"+oid_1});for(var nn1=0;nn1<conn_org_l1.length;nn1++){$("#"+conn_org_l1.get(nn1).targetId).hide();}}}}if (erAgent.indexOf('MSIE') > -1) {jsPlumb.repaintEverything();}});//添加部门拓扑关系，也就是连接公司到部门,遍历部门for(var i1=0;i1<company_department.length;i1++){var company_department_orgnize=company_department[i1].children; //四个公司下⾯的部门的组织jsPlumb.draggable("instance_"+company_department[i1].id); //设置部门可拖拽var s3=jsPlumb.addEndpoint("instance_"+company_department[i1].id,defaults); //设置部门的节点jsPlumb.connect({source:s2_root, target:s3}); //连接四个公司到部门company_department_arr.push(company_department[i1]);if(company_department[i1].hasOwnProperty("children")){var s3_root=jsPlumb.addEndpoint("instance_"+company_department[i1].id, {anchor:"Bottom"},rootnode); //把部门设置成根节点//对部门绑定click事件s3_root.bind("click", function(endpoint) {if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){endpoint.setParameter("img","sub");endpoint.setImage("images/sub.png");for(var k1=0;k1<endpoint.connections.length;k1++){endpoint.connections[k1].setVisible(true);$("#"+endpoint.connections[k1].targetId).show();var oid1=endpoint.connections[k1].targetId.split("_")[1];jsPlumb.show("instance_"+oid1,true);$("#instance_"+oid1).show();}//隐藏其他部门下的科室for(var mm=0;mm<company_department_arr.length;mm++){if(endpoint.elementId!="instance_"+company_department_arr[mm].id){var conn_org1=jsPlumb.select({source:"instance_"+company_department_arr[mm].id});if(company_department_arr[mm].hasOwnProperty("children")){for(var nn=0;nn<conn_org1.length;nn++){$("#"+conn_org1.get(nn).targetId).hide();jsPlumb.hide(conn_org1.get(nn).targetId,true);var oid_s=conn_org1.get(nn).targetId.split("_")[1];var conn_org_l2=jsPlumb.select({source:"instance_"+oid_s});for(var nnn1=0;nnn1<conn_org_l2.length;nnn1++){$("#"+conn_org_l2.get(nnn1).targetId).hide();jsPlumb.hide(conn_org_l2.get(nnn1).targetId,true);var oid_11=conn_org_l2.get(nnn1).targetId.split("_")[1];var conn_org_l11=jsPlumb.select({source:"instance_"+oid_11});for(var nnn2=0;nnn2<conn_org_l11.length;nnn2++){$("#"+conn_org_l11.get(nnn2).targetId).hide();}}}conn_org1.get(0).endpoints[0].setParameter("img","add");conn_org1.get(0).endpoints[0].setImage("images/add.png");conn_org1.setVisible(false);}}else{var company_department_orgnize_sec=company_department_arr[mm].children;for(var kkk=0;kkk<company_department_orgnize_sec.length;kkk++){if(company_department_orgnize_sec[kkk].hasOwnProperty("children")){jsPlumb.select({source:"instance_"+company_department_orgnize_sec[kkk].id}).setVisible(false); jsPlumb.select({source:"instance_"+company_department_orgnize_sec[kkk].id}).get(0).endpoints[0].setPa }}}}}else{endpoint.setParameter("img","add");endpoint.setImage("images/add.png");for(var k1=0;k1<endpoint.connections.length;k1++){endpoint.connections[k1].setVisible(false);$("#"+endpoint.connections[k1].targetId).hide();jsPlumb.hide(endpoint.connections[k1].targetId,true);var oidss=endpoint.connections[k1].targetId.split("_")[1];var conn_org_l2=jsPlumb.select({source:"instance_"+oidss});for(var nnn1=0;nnn1<conn_org_l2.length;nnn1++){$("#"+conn_org_l2.get(nnn1).targetId).hide();jsPlumb.hide(conn_org_l2.get(nnn1).targetId,true);var oid_11=conn_org_l2.get(nnn1).targetId.split("_")[1];var conn_org_l11=jsPlumb.select({source:"instance_"+oid_11});for(var nnn2=0;nnn2<conn_org_l11.length;nnn2++){$("#"+conn_org_l11.get(nnn2).targetId).hide();}}}}if (erAgent.indexOf('MSIE') > -1) {jsPlumb.repaintEverything();}});//添加科室拓扑关系，也就是连接部门到科室;for(var i2=0;i2<company_department_orgnize.length;i2++){var staff=company_department_orgnize[i2].children; //组织下⾯的个⼈jsPlumb.draggable("instance_"+company_department_orgnize[i2].id); //设置组织可拖拽var s4=jsPlumb.addEndpoint("instance_"+company_department_orgnize[i2].id,defaults); //设置组织的节点jsPlumb.connect({source:s3_root, target:s4}); //连接连接部门到组织company_department_sec_arr.push(company_department_orgnize[i2]);if(company_department_orgnize[i2].hasOwnProperty("children")){var s4_root=jsPlumb.addEndpoint("instance_"+company_department_orgnize[i2].id, {anchor:"Bottom"},rootnode); //把组织设置成根节点//绑定科室点击事件s4_root.bind("click", function(endpoint) {if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){endpoint.setParameter("img","sub");endpoint.setImage("images/sub.png");for(var k2=0;k2<endpoint.connections.length;k2++){endpoint.connections[k2].setVisible(true);$("#"+endpoint.connections[k2].targetId).show();}//隐藏其他科室下的⼈for(var mmm=0;mmm<company_department_sec_arr.length;mmm++){if(endpoint.elementId!="instance_"+company_department_sec_arr[mmm].id){var conn_org_2=jsPlumb.select({source:"instance_"+company_department_sec_arr[mmm].id});if(company_department_sec_arr[mmm].hasOwnProperty("children")){for(var nn1=0;nn1<conn_org_2.length;nn1++){$("#"+conn_org_2.get(nn1).targetId).hide();jsPlumb.hide(conn_org_2.get(nn1).targetId,true);//var oid=conn_org_2.get(nn1).targetId.split("_")[1];}conn_org_2.get(0).endpoints[0].setParameter("img","add");conn_org_2.get(0).endpoints[0].setImage("images/add.png");conn_org_2.setVisible(false);}}}}else{endpoint.setParameter("img","add");endpoint.setImage("images/add.png");for(var k2=0;k2<endpoint.connections.length;k2++){endpoint.connections[k2].setVisible(false);$("#"+endpoint.connections[k2].targetId).hide();jsPlumb.hide(endpoint.connections[k2].targetId,true);var oid=endpoint.connections[k2].targetId.split("_")[1];//$("div[id*=_"+oid+"_]").hide();}}if (erAgent.indexOf('MSIE') > -1) {jsPlumb.repaintEverything();}});for(var i3=0;i3<staff.length;i3++){//var staff=company_department_orgnize[i2].children; //组织下⾯的个⼈jsPlumb.draggable("instance_"+staff[i3].id); //设置组织可拖拽var s5=jsPlumb.addEndpoint("instance_"+staff[i3].id,defaults); //设置组织的节点jsPlumb.connect({source:s4_root, target:s5}); //连接连接部门到组织}}}}}}}s1.bind("click", function(endpoint) {if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){endpoint.setParameter("img","sub");endpoint.setImage("images/sub.png");jsPlumb.select({source:"top_server"}).setVisible(true);for(var i=0;i<company.length;i++){jsPlumb.show("instance_"+company[i].id,true);$("#instance_"+company[i].id).show();var company_department=company[i].children; //alert(company[i].id);if(company_department.length>0){jsPlumb.select({source:"instance_"+company[i].id}).setVisible(false);jsPlumb.select({source:"instance_"+company[i].id}).get(0).endpoints[0].setParameter("img","add"); jsPlumb.select({source:"instance_"+company[i].id}).get(0).endpoints[0].setImage("images/add.png"); }}}else{endpoint.setParameter("img","add");endpoint.setImage("images/add.png");jsPlumb.hide("top_server");for(var i=0;i<company.length;i++){var company_department=company[i].children;jsPlumb.hide("instance_"+company[i].id,true);for(var j=0;j<company_department.length;j++){jsPlumb.hide("instance_"+company_department[j].id,true);if(company_department[j].hasOwnProperty("children")){var orgnize=company_department[j].children;for(var j1=0;j1<orgnize.length;j1++){jsPlumb.hide("instance_"+orgnize[j1].id,true);}}}}$(".nodeWord").parent().hide();}if (erAgent.indexOf('MSIE') > -1) {jsPlumb.repaintEverything();}});$(window).resize(function(){jsPlumb.repaintEverything();});});}/** 元素摆放位置--对称分布*/function elementLocation(nodeArr,nodeNumber){if(nodeNumber%2==1){//总节点数是奇数//var num=parseInt(nodeNumber/2);for(var i=0;i<nodeArr.length;i++){if(i<parseInt(nodeNumber/2)){leftLoc=50-10*(i+1);}else if(i>parseInt(nodeNumber/2)){leftLoc=50+10*(i-parseInt(nodeNumber/2));}else{leftLoc=50;}if(nodeArr[i].hasOwnProperty("children")){var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>";$("body").append(html);var companyLoc=leftLoc; //在本例中表⽰公司横向定位，做这个是⽅便公司下⾯的部门定位；var companyDepartArr=nodeArr[i].children;var companyDepartArrLength=companyDepartArr.length;companyDepartLocation(companyLoc,companyDepartArr,companyDepartArrLength); //部门定位}else{var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode_leaf\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>"; $("body").append(html);}}}else if(nodeNumber%2==0){//总节点数是偶数//var num=parseInt(nodeNumber/2);for(var i=0;i<nodeArr.length;i++){if(i+1<=parseInt(nodeNumber/2)){leftLoc=50-5-10*i;}else if(i+1>parseInt(nodeNumber/2)){leftLoc=50+5+10*(i-parseInt(nodeNumber/2));}if(nodeArr[i].hasOwnProperty("children")){var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>";$("body").append(html);var companyLoc = leftLoc;var companyDepartArr=nodeArr[i].children;var companyDepartArrLength=companyDepartArr.length;companyDepartLocation(companyLoc,companyDepartArr,companyDepartArrLength); //部门定位}else{var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode_leaf\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>"; $("body").append(html);}}}}//部门定位function companyDepartLocation(nodeLoc,nodeArr,nodeNumber){if(nodeNumber%2==1){for(var j=0;j<nodeNumber;j++){var department=nodeArr[j],leftLoc;if(j<parseInt(nodeNumber/2)){leftLoc=nodeLoc-5*(j+1);}else if(j>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5*j;}else{leftLoc=nodeLoc;}if(department.hasOwnProperty("children")){var html="<div id='instance_"+department.id+"' class='instanceNode' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>";$("body").append(html);var departmentOrgnize=department.children;var departmentOrgnizeLength=departmentOrgnize.length;var departmentOrgnizeLoc=leftLoc;departmentOrgnizeLocation(departmentOrgnizeLoc,departmentOrgnize,departmentOrgnizeLength); //组织定位}else{var html="<div id='instance_"+department.id+"' class='instanceNode_leaf' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>"; $("body").append(html);}}}else if(nodeNumber%2==0){for(var j=0;j<nodeNumber;j++){var department=nodeArr[j],leftLoc;if(j+1<=parseInt(nodeNumber/2)){leftLoc=nodeLoc-5-5*j;}else if(j+1>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5+5*(j-parseInt(nodeNumber/2));if(department.hasOwnProperty("children")){var html="<div id='instance_"+department.id+"' class='instanceNode' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>";$("body").append(html);var departmentOrgnize=department.children;var departmentOrgnizeLength=departmentOrgnize.length;var departmentOrgnizeLoc=leftLoc;departmentOrgnizeLocation(departmentOrgnizeLoc,departmentOrgnize,departmentOrgnizeLength); //组织定位}else{var html="<div id='instance_"+department.id+"' class='instanceNode_leaf' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>"; $("body").append(html);}}}}//组织定位function departmentOrgnizeLocation(nodeLoc,nodeArr,nodeNumber){if(nodeNumber%2==1){for(var j=0;j<nodeNumber;j++){var orgnize=nodeArr[j],leftLoc;if(j<parseInt(nodeNumber/2)){leftLoc=nodeLoc-5*(j+1);}else if(j>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5*(j-parseInt(nodeNumber/2));}else{leftLoc=nodeLoc;}if(orgnize.hasOwnProperty("children")){var html="<div id='instance_"+orgnize.id+"' class='instanceNode' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";$("body").append(html);var staffArr=orgnize.children;var staffLength=staffArr.length;var staffLoc=leftLoc;staffLocation(staffLoc,staffArr,staffLength); //员⼯定位}else{var html="<div id='instance_"+orgnize.id+"' class='instanceNode_leaf' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";$("body").append(html);}}}else if(nodeNumber%2==0){for(var j=0;j<nodeNumber;j++){var orgnize=nodeArr[j],leftLoc;if(j+1<=parseInt(nodeNumber/2)){leftLoc=nodeLoc-5-5*j;}else if(j+1>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5+5*(j-parseInt(nodeNumber/2));}if(orgnize.hasOwnProperty("children")){var html="<div id='instance_"+orgnize.id+"' class='instanceNode' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";$("body").append(html);var staffArr=orgnize.children;var staffLength=staffArr.length;var staffLoc=leftLoc;staffLocation(staffLoc,staffArr,staffLength); //员⼯定位}else{var html="<div id='instance_"+orgnize.id+"' class='instanceNode_leaf' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";$("body").append(html);}}}}//员⼯定位function staffLocation(nodeLoc,nodeArr,nodeNumber){if(nodeNumber%2==1){for(var j=0;j<nodeNumber;j++){var staff=nodeArr[j],leftLoc;if(j<parseInt(nodeNumber/2)){leftLoc=nodeLoc-5*(j+1);}else if(j>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5*(j-parseInt(nodeNumber/2));}else{leftLoc=nodeLoc;。
Jquery插件大全1、导航类1）基于jQuery开发，非常简单的水平方向折叠控件。
2)具有XBOX360 blade界面风格的水平方向Accordion。
3)用于创建折叠菜单的jQuery插件4)基于jQuery开发的可折叠菜单。
5)模仿ext的tab选项卡TabPanel(选项卡组件)参数说明renderTo<渲染到某容器string | jQuery object | NULL>将选项卡组件渲染到某容器，参数类型可以为字符串，也可以为jQuery所加载的对象，如果为声明该参数，组件默认的承载容器为BODY。
items<选项卡元素集合array>选项卡组件渲染后就会显示的选项卡元素集合，具体参数请查看选项卡元素。
width<宽度string | number>选项卡组件的总宽度，默认400px。
height<高度string | number>选项卡组件中页面显示层的高度，默认300px。
border<是否显示边框string>嵌套显示选项卡时，会出现重复边框的情况，影响美观，将border设置为”none”，则可以避免，默认显示边框，不接受除”none”之外的参数值。
active<渲染后默认激活哪个选项卡元素number>下标以0为开始，默认为0。
maxLength<最多显示几个选项卡元素number>-1为无限，默认为-1。
tabs<获得选项卡组件所有的选项卡元素return array>可根据需要获得选项卡组件的所有选项卡元素。
公共方法addTab(添加一个选项卡元素object)动态向选项卡组件中添加一个选项卡元素。
flush(刷新选项卡元素的内容string | number)将选项卡元素的内容刷新，参数可以为选项卡元素的ID或下标。
show(显示选项卡元素string | number)显示制定选项卡元素，参数可以为选项卡元素的ID或下标。
jquery树形插件zTree⾼级使⽤详解使⽤⾼级zTree进⾏对属性结构进⾏操作的时候，做好的⽅式是参考官⽹的API⽂档。
本⽂简单介绍下如何通过后台传递过来⼀个树形结构的树，并且通过页⾯进⾏加载。
【与后台交互步骤】1、编写页⾯，引⼊zTree相关插件；2、编写js脚本，设定树形结构的基本属性；3、编写zTree的PO对象；4、编写返回属性结构的⽅法（json格式返回）；5、页⾯请求树。
1、引⼊zTree相关的插件：<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery-1.9.1.min.js"></script><link rel="stylesheet" href="<%=request.getContextPath() %>/resources/bootstrap/3.3.4/css/bootstrap.min.css" ><script type="text/javascript" src="<%=request.getContextPath() %>/resources/bootstrap/3.3.4/js/bootstrap.min.js"></script><!-- 引⼊zTree相关的js/css⽂件 --><link rel="stylesheet" href="<%=request.getContextPath() %>/resources/ztree/zTreeStyle/zTreeStyle.css" ><script type="text/javascript" src="<%=request.getContextPath() %>/resources/ztree/jquery.ztree.all.js"></script>2、编写js脚本，设定树形结构的基本属性// zTree 的参数配置，深⼊使⽤请参考 API ⽂档（setting 配置详解）var setting = {check:{enable: false,//autoCheckTrigger:true,//chkStyle:"none"},callback:{onClick:queryRoleByEmployee}};function queryRoleByEmployee(event, treeId, treeNode){//(treeNode.tId + ", " + + "," + treeNode.checked);//("--------"+treeNode.isParent);if(treeNode.isParent == true){//将⾓⾊的树形结构清楚$.fn.zTree.destroy("roleTree");return ;}$.get('<%=request.getContextPath()%>/'+treeNode.objCode+'/role',{"coddd":treeNode.isParent},function(data){(data);zTreeObj = $.fn.zTree.init($("#roleTree"), settingRole, data);});}3、编写zTree的PO对象public class DimsTree {//除了树本⾝的属性,还可以⾃定义属性.private Object objCode;//树形结构展⽰的名称private String name;//是否打开属性private String open;//是否根节点private boolean isParent;//urlprivate String url;//⼦节点private List<DimsTree> children;//是否被选中private boolean checked;//省略gettings和settings⽅法}4、编写返回属性结构的⽅法（json格式返回）@ResponseBody@RequestMapping(value="/user_role1")public List<DimsTree> userRole1(Model model){//宿舍信息TreeList<DimsTree> dimsTreeList = new ArrayList<DimsTree>();//加载⽤户信息列表,⼿链需要加载宿舍信息,将⽤户信息加⼊到宿舍信息中.List<Dormitory> dormitoiryList = dormitoryDao.list();for(Dormitory dorm: dormitoiryList){DimsTree dt = new DimsTree();dt.setName(dorm.getDormCode());dt.setParent(true);//根节点dt.setObjCode(dorm.getDormCode());dt.setChildren(employee2DimsTree(dorm));dimsTreeList.add(dt);}model.addAttribute(dimsTreeList);//加载⾓⾊信息列表，对已经选中的⾓⾊进⾏设置checked=true属性。
jquery插件treegrid树状表格的使⽤⽅法详解（.Net平台）⼀、使⽤treegrid，需要以下⽀持jquery.min.js+jquery.treegrid.min.js⼆、后端提供树状列表格式的集合数据，借助前端的DT的配置控制，来在页⾯上输出满⾜treegrid格式要求的html前台：@using Model@{Layout = null;UserInfo userInfo = null;if (ViewData["LoginUser"] != null){userInfo = ViewData["LoginUser"] as UserInfo;}else{Response.Redirect("/Login/Index");}}<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /><title>⽤户列表</title><link href="~/Content/Scripts/h-ui/css/H-ui.min.css" rel="stylesheet" /><link href="~/Content/Scripts/h-ui.admin/css/H-ui.admin.css" rel="stylesheet" /><link href="~/Content/Scripts/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" /><link href="~/Content/Scripts/treegrid/css/jquery.treegrid.css" rel="stylesheet" /><style>.page-container {padding: 10px;}.operation {background: #EFEEF0;padding: 3px;}.search {background: #EFEEF0;padding: 5px;margin-top: 5px;}.table {margin-top: 10px;}.dataTables_info {margin-left: 5px;}#table1_info {padding: 0;}#table1_length {margin-left: 15px;}</style><!--引⼊脚本解决兼容性(hack技术，必须放⼊head中)--><!--[if lt IE 9]><script src="~/Content/Scripts/html5_css3/html5shiv.min.js"></script><script src="~/Content/Scripts/html5_css3/respond.min.js"></script><script src="~/Content/Scripts/PIE-2.0beta1/PIE_IE678.js"></script><![endif]--></head><body><div class="page-container"><div class="operation">@Html.Partial("CRUDBtn", userInfo)</div><div class="table"><table id="table1" class="table table-border table-bordered table-bg table-hover"><thead><tr class="text-c"><th><input type="checkbox" name="" value=""></th><th>菜单名</th><th>请求路径</th><th>描述</th><th>添加时间</th><th>修改时间</th></tr></thead></table></div></div></body></html><script src="~/Content/Scripts/jquery-2.0.3.min.js"></script><script src="~/Content/Scripts/datatables/1.10.13/jquery.dataTables.min.js"></script><script src="~/Content/Scripts/layer/2.1/layer.js"></script><script src="~/Content/Scripts/My97DatePicker/WdatePicker.js"></script><script src="~/Content/Scripts/h-ui/js/H-ui.js"></script><script src="~/Content/Scripts/h-ui.admin/js/H-ui.admin.js"></script><script src="~/Content/Scripts/treegrid/js/jquery.treegrid.min.js"></script><script type="text/javascript">var table1 = null;$(function () {table1 = initializeTable();clickDeal();});/*点击处理*/function clickDeal() {var addBtn = $("#add");var deleteBtn = $("#delete");var editBtn = $("#edit");var viewBtn = $("#view");$("#search").click(function () {table1.ajax.reload();return false;});if (addBtn != null) {addBtn.click(function () {var title = $(this).text().substring(1).trim();var url = $(this).attr("url");layer_show(title, url, 600, 360);});}if (deleteBtn != null) {deleteBtn.click(function () {var idArr = [];var url = $(this).attr("url");$("input:checkbox[name=id]:checked").each(function () {var item = this;idArr.push($(item).val());});if (idArr.length == 0) {layer.msg("请⾄少选择⼀个选项", { icon: 2, time: 2000 });}else {layer.confirm('确认要删除吗？', function (index) {var loadIndex = layer.load();$.ajax({url: url,type: "post",data: { "idArrStr": idArr.toString() },dataType: "json",success: function (data) {if (data.Pass) {layer.close(loadIndex);layer.msg(data.Msg, { icon: 1, time: 2000 });table1.ajax.reload(null, false);} else {layer.msg(data.Msg, { icon: 1, time: 2000 });}},error: function (msg) {layer.msg(msg.status);}});});}});}if (editBtn != null) {editBtn.click(function () {var idArr = [];var title = $(this).text().substring(1).trim();var url = $(this).attr("url");$("input:checkbox[name=id]:checked").each(function () {var item = this;idArr.push($(item).val());});if (idArr.length != 1) {layer.msg("请选择⼀个选项", { icon: 2, time: 2000 });}else {url += "?id=" + idArr[0];layer_show(title, url, 600, 360);}});}if (viewBtn != null) {viewBtn.click(function () {var idArr = [];var title = $(this).text().substring(1).trim();var url = $(this).attr("url");$("input:checkbox[name=id]:checked").each(function () {var item = this;idArr.push($(item).val());});if (idArr.length != 1) {layer.msg("请选择⼀个选项", { icon: 2, time: 2000 });}else {url += "?id=" + idArr[0];layer_show(title, url, 600, 360);}});}}/*初始化table*/function initializeTable() {var table = $("#table1").DataTable({/****************************************表格数据加载****************************************************/"serverSide": true,"ajax": {//ajax请求数据源"url": "/Power/Manager/Search","type": "post","data": function (data) {//添加额外的数据给服务器}},"columns": [//列绑定{ "defaultContent": "" },{ "data": "PowerName" },{ "data": "Url" },{ "data": "Description" },{ "data": "AddTime" },{ "data": "ModifyTime" }],"columnDefs": [//列定义{"targets": [0],"data": "PowerId","render": function (data, type, full) {//全部列值可以通过full.列名获取,⼀般单个列值⽤data PS:这⾥的render是有多少列就执⾏多少次⽅法。
JqGrid帮助⽂档JQGrid是⼀个在jquery基础上做的⼀个表格控件，以ajax的⽅式和服务器端通信。
是⼀个在线的演⽰项⽬。
在这⾥，可以知道jqgrid可以做什么事情。
下⾯是转⾃其他⼈blog的⼀个学习资料，与其说是学习资料，说成查询帮助⽂档更加合适。
jqGrid学习之 ------------- 安装jqGrid安装很简单，只需把相应的css、js⽂件加⼊到页⾯中即可。
按照官⽹⽂档:/myproject/css/ui.jqgrid.css/ui-lightness//images/jquery-ui-1.7.2.custom.css/myproject/js//i18n/grid.locale-bg.jslist of all language files….Changes.txtjquery-1.3.2.min.jsjquery.jqGrid.min.js在页⾯中写法：Java代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>My First Grid</title><link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /><link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css" /><link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" /><style>html, body {margin: 0;padding: 0;font-size: 75%;}</style><script src="js/jquery-1.3.2.min.js" type="text/javascript"></script><script src="js/src/grid.loader.js" type="text/javascript"></script></head><body>...</body></html>需要说明的是，jquery-ui的字体⼤⼩与jqgrid字体⼤⼩不⼀致，故需要在页⾯上在加上⼀段style来指定页⾯上⽂字⼤⼩。
JQuery如何实现统计图表EEP JQuery如何实现统计图表讯光科技前⾔在ERP项⽬开发过程中，统计图表(chart)普遍应⽤于各种统计和报表中，其形象直观，内容清晰。
EEP的JQuery⽹站项⽬使⽤了Easyui 插件并且进⾏了包装，但是easyui 并没有提供图表相关的组件和实现⽅法。
为了实现图表功能，需要使⽤另⼀些第三⽅JQuery图表插件来实现图表的功能。
本⽂使⽤基于jQuery的开源javascript绘图库插件Flot，并结合EEP的N-Tier架构来实现简单的柱状图(barchart)和饼状图(piechart)设计。
准备⼯作数据源：使⽤SQL Server 范例数据库Northwind 的Orders表与Order Details表。
EEP2012：使⽤EEP2012的JQWebClient⽹站。
Flot插件下载：并且将需要使⽤的JS檔加⼊到EEP的JQWebClient⽹站中。
Bar chart实例(1) 实现功能：统计1997年订单的每⽉销售额, 并以Barchart做⽐较。
(2) 数据库语句：select month(orders.OrderDate) as Month,sum(Orders.TotalAmout) as TotalAmount from orders where year(orders.OrderDate)=1997 group by month(orders.OrderDate) (3) 建⽴Server端：使⽤SSingle模版加⼊⼀个Server端命名为SBarChart，然后将以上数据库语句复制到Master(infocommand组件)的CommandText属性上，build这个Server端⼯程。
然后在EEPNetServer的Package Manager上加⼊build好的SBarChart.dll。
(4) 建⽴Client端：在JQWebClient⽹站下建⽴⼀个ChartExample⽂件夹存放我们范例的⽹页，在这个⽂件夹下加⼊⼀个空⽩⽹页BarChart.aspx。
jQuery图表插件Flot中文文档最近正在使用JQuery的flot进行画图，但是这方面的中文帮助实在是太少了，干脆把英文的document直接翻译一下吧。
因为也是再学习过程当中，难免会存在翻译不准确的地方，如果文中描述的不明白的话，可以参考一下原文：http://people.iola.dk/olau/flot/API.txt调用plot函数的方法如下：1 var plot = $.plot(placeholder, data, options)Data的结构：data应该是data series的一个数组：[ series1, series2, ... ]一个series可以是原始数据或者是拥有属性的对象。
原始数据是一个二维数组：[ [x1, y1], [x2, y2], ... ]为了简化flot内容的逻辑关系，x轴和y轴的数值都要使用数字（当然，如果有特殊需要的话，flot也可以支持以时间一个轴，后面会有详细的说明）。
因为大多数的情况下，我们都是从数据库中直接提取数据并转换成JSON格式，但是没有关心过数据类型的问题。
如果出现了奇怪的现象的话，请先检查数据的格式是否有问题。
如果在一个点的数据使用的是null的话，那么在绘制的过程中就会把这个点忽略。
那么包含这个点的那条线就会有断开的现象。
这个点之前和之后的点是无法进行连接的。
线和点是相关连的。
对于bars，可以设置第三个关联值（默认是0）。
一个单一的序列对象结构是：1 2 3 4 5 6 7 8 910111213 {color: color or numberdata: rawdatalabel: stringlines: specific lines options bars: specific bars optionspoints: specific points options xaxis: 1 or 2yaxis: 1 or 2clickable: booleanhoverable: booleanshadowSize: number}除了其中的data以外，其它的属性都没有必要明确的指定，因为大多数情况下它们都是使用默认值的。
jQuery插件开发模式【jQuery培训】软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能更好地组织我们的代码，并且从这些前人总结出来的模式中学到很多好的实践。
根据jQuery高级编程的描述，jQuery插件开发方式主要有三种：通过$.extend()来扩展jQuery通过$.fn向jQuery添加新的方法通过$.widget()应用jQuery UI的部件工厂方式创建通常我们使用第二种方法来进行简单插件开发，说简单是相对于第三种方式。
第三种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等，非常贴心，这里不细说。
而第一种方式又太简单，仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。
所以我们调用通过$.extend()添加的函数时直接通过$符号调用（$.myfunction()）而不需要选中DOM元素($('#example').myfunction())。
请看下面的例子。
$.extend({ sayHello: function(name) { console.log('Hello,' + (name ? name : 'Dude') + '!'); }})$.sayHello(); //调用$.sayHello('Wayou'); //带参调用上面代码中，通过$.extend()向jQuery添加了一个sayHello函数，然后通过$直接调用。
到此你可以认为我们已经完成了一个简单的jQuery插件了。
但如你所见，这种方式用来定义一些辅助方法是比较方便的。
比如一个自定义的console，输出特定格式的信息，定义一次后可以通过jQuery在程序中任何需要的地方调用它。
$.extend({ log: function(message) { var now = new Date(), y = now.getFullYear(), m = now.getMonth() + 1, //！JavaScript中月分是从0开始的d = now.getDate(), h = now.getHours(), min = now.getMinutes(), s = now.getSeconds(), time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s; console.log(time + ' My App: ' + message); }})$.log('initializing...'); //调用但这种方式无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用第二种开发方式。
∙帆软（中国）有限公司∙商务咨询电话：86-025-5186 2240∙商务咨询邮箱：business@ ∙公司网址：37款开源jQuery表格插件我们一般使用HTML表格来显示数据，我们都知道div更容易设计，更灵活。
但是现在你使用这些精彩的jQuery表格插件，将更简单、灵活、更多风格。
下面介绍了37款开源jQuery表格插件。
感谢FineReport报表软件公司的整理。
jQuery网格插件jqGridjqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。
主要特点:-Full control with JavaScript API-Data returned from the server is XML-Simple configuration-Ability to load big datasets (paging)-Resizable columns-Server-side sorting-Support of links, images, checkboxes-You can add more than one grid on a sigle page (master-detail)-Paging∙帆软（中国）有限公司∙商务咨询电话：86-025-5186 2240∙商务咨询邮箱：business@ ∙公司网址：∙授权协议：MIT∙开发语言：JavaScript∙操作系统：跨平台jQuery表格插件jQuery grid view pluginjqGridView是新的，富客户端的，基于XML ，Ajax网格插件的jQuery库。
jqGridView提供专业的解决方案，代表和编辑表格数据在网络上。
精心设计的，具有强大的脚本API的，这可编辑网格是很简单的DHTML与XML 的配置，并显示出令人信服的成果与大量数据。
jqGridView可以轻松地执行好期待（管理通过的CSS ）。
