首页 / JQUERY / jquery插件treegrid树状表格的使用方法详解（.Net平台）

jquery插件treegrid树状表格的使用方法详解（.Net平台）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jquery插件treegrid树状表格的使用方法详解（.Net平台），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9399字，纯文字阅读大概需要14分钟。

内容图文

上一篇介绍了DataTable，这一篇在DT的基础之上再使用jquery的一款插件：treegrid,官网地址：http://maxazan.github.io/jquery-treegrid/

一、使用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是有多少列就执行多少次方法。。。不知道为啥
   return "<input type='checkbox' value='" + data + "' name='id'>";
   }
  },
  {
   "targets": [4],
   "data": "AddTime",
   "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
   if (data == null || data.trim() == "") { return "/"; }
   else {
    var dateTime = new Date(parseInt(data.replace("/Date(", "").replace(")/", ""), 10));
    var month = dateTime.getMonth() + 1 < 10 ? "0" + (dateTime.getMonth() + 1) : dateTime.getMonth() + 1;
    var date = dateTime.getDate() < 10 ? "0" + dateTime.getDate() : dateTime.getDate();
    return dateTime.getFullYear() + "/" + month + "/" + date;
   }
   }
  },
  {
   "targets": [5],
   "data": "ModifyTime",
   "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
   if (data == null || data.trim() == "") { return "/"; }
   else {
    var dateTime = new Date(parseInt(data.replace("/Date(", "").replace(")/", ""), 10));
    var month = dateTime.getMonth() + 1 < 10 ? "0" + (dateTime.getMonth() + 1) : dateTime.getMonth() + 1;
    var date = dateTime.getDate() < 10 ? "0" + dateTime.getDate() : dateTime.getDate();
    return dateTime.getFullYear() + "/" + month + "/" + date;
   }
   }
  },
  ],
  "rowCallback": function (row, data, displayIndex) {//行定义
  if (data.ParentId != "0") {
   $(row).attr("class", "text-c treegrid-" + data.PowerId + " treegrid-parent-" + data.ParentId);
  } else {
   $(row).attr("class", "text-c treegrid-" + data.PowerId);
  }
  },
  "initComplete": function (settings, json) { //表格初始化完成后调用
  $("#table1").treegrid({
   "initialState": 'collapsed',
  });
  },
  /****************************************表格数据加载****************************************************/
  /****************************************表格样式控制****************************************************/
  "dom": "t<'dataTables_info'il>p",//表格布局
  "processing": true,//等待加载效果
  "language": {//语言国际化
  "lengthMenu": "每页 _MENU_ 条",
  "zeroRecords": "没有找到记录",
  "info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_条",
  "infoEmpty": "无记录",
  "paginate":
  {
   "first": "首页",
   "previous": "前一页",
   "next": "后一页",
   "last": "末页"
  },
  "processing": "表格在努力渲染中......",
  "loadingRecords": "加载记录中...",//注意该参数在从服务器加载的时候无效，只有Ajax和客户端处理的时候有效
  },
  "paging": false,//分页功能
  "ordering": false,//排序功能
  "autoWidth": false,//自动宽度（这里关闭后，可以随着左侧的隐藏而扩展页面一起100%宽度）
  /****************************************表格样式控制****************************************************/
 });
 return table;
 }
</script>

后台：

public ActionResult Search(DataTable dt)
 {
 int total;
 IQueryable<Model.Power> powerIq = CurrentBllSession.PowerBll.GetIQueryable();
 total = powerIq.Count();
 List<Model.Power> powerList = powerIq.ToList();
 powerList = TreeGridList(powerList);
 dt.recordsTotal = total;
 dt.recordsFiltered = total;
 dt.data = powerList;
 return Json(dt);
 }
 /// <summary>
 /// 将List转换为TreeGrid格式的List
 /// </summary>
 private List<Model.Power> TreeGridList(List<Model.Power> powerList)
 {
 List<Model.Power> treegridList=new List<Model.Power>();
 foreach (var powerOne in powerList.Where(a => a.ParentId == "0" || a.PowerId.Length == 4).OrderBy(a => a.Sort))//一级菜单
 {
 treegridList.Add(powerOne);
 foreach (var powerTwo in powerList.Where(a => a.ParentId != "0" && a.PowerId.Length == 8 && a.ParentId == powerOne.PowerId).OrderBy(a=>a.Sort))//二级菜单
 {
  treegridList.Add(powerTwo);
  foreach (var powerBtn in powerList.Where(a => a.ParentId != "0" && a.PowerId.Length == 8 && a.ParentId == powerTwo.PowerId).OrderBy(a => a.Sort))//按钮
  {
  treegridList.Add(powerBtn);
  }
 }
 }
 return treegridList;
 }

解释说明：

treegrid是通过tr标签上的class内容和tr的位置关系来组织表格中行之间的父子关系和位置关系的，

DT中的配置项：

 "rowCallback": function (row, data, displayIndex) {//行定义
    if (data.ParentId != "0") {
     $(row).attr("class", "text-c treegrid-" + data.PowerId + " treegrid-parent-" + data.ParentId);
    } else {
     $(row).attr("class", "text-c treegrid-" + data.PowerId);
    }
   },

就是来控制父子关系的。

而后台的List顺序转换，是为了调整好输出的顺序，从而来控制tr之间的位置关系。

通过DT初始化好表格之后，调用

$("#table1").treegrid({
     "initialState": 'collapsed',
    });

即可，绘制好树状表格。

效果图：

jquery插件treegrid树状表格的使用方法详解（.Net平台） - 文章图片

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

内容总结

以上是互联网集市为您收集整理的jquery插件treegrid树状表格的使用方法详解（.Net平台）全部内容，希望文章能够帮你解决jquery插件treegrid树状表格的使用方法详解（.Net平台）所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/347206.html

来源：【匿名】

【上一篇】深入理解Jquery表单验证（使用formValidator）【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【jquery插件treegrid树状表格的使用方法详解（.Net平台）】教程文章相关的互联网学习教程文章

实用的placeholder插件，兼容IE下的placeholder，jquery插件【代码】

placeholder在IE下无法兼容，下面的插件很好的处理了这个问题，拿去不谢 1/* 2 * jQuery placeholder, fix for IE6,7,8,93 * @website itmyhome.com4*/ 5var JPlaceHolder = {6//检测 7 _check : function(){8return ‘placeholder‘ in document.createElement(‘input‘);9 }, 10//初始化11 init : function(){ 12if(!this._check()){ 13this.fix(); 14 } 15 }, 16//修复17 fix : function(){ 18 ...

jQuery插件扩展方法【代码】

jQuery为扩展插件提拱了两个方法，分别是：jQuery.extend(object) —— 给jQuery对象添加方法。jQuery.fn.extend(object) —— 为扩展jQuery类本身.为类添加新的方法； fn表示什么呢？下面代码是jQuery源代码中定义的fn：jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//…… }; 从上面代码我们不难看出 jQuery.fn = jQuery.prototype。对于prototype肯定不会陌生， javascript没有明确的类...

跟我一起学JQuery插件开发【代码】【图】

http://www.cnblogs.com/Leo_wl/archive/2012/04/06/2435511.html 以前一直比较好奇，jquery插件是怎么开发的，怎么写属于自己的插件？昨天在逛codeproject网站的时候，突然看到一篇文章：How to write plugin in Jquery.如果对E文好的同学，可以看上面的连接。现在我把上面网站的及结合自己的想法写这篇文章。希望能得到大牛们的支持和谅解。。。大鸟飞过。。。欢迎拍装。资料来源：【1】How to write plugin in Jquery.【2】锋...

15个超级实用的jQuery插件

jQuery是一个可订制的、轻量级的前端开发框架，它会让你的前端开发拥有无限的可能性。它会在敏捷Web开发中帮你做很多事情，比如简化HTML文档的解析、事件处理、动画效果和Ajax交互。实践上jQuery已经成为了新一代的标准。在这篇文章中，我们整理了9月份以来最新的15个jQuery插件，它们都非常优秀。根据下面提到的这些jQuery插件，你可以在很多地方提高和优化Web应用的性能。我们希望你能从中找到对你有帮助的插件，如果你也知道很...

自己动手JQuery插件开发【代码】【图】

最近在复习JQuery，发现自己还没写过一个插件。在写插件之前，觉得开发插件是高端上档次的事，跟我这种小菜不搭边啊。不过在网上查了相关资料，发现开发插件其实是很简单的。在这里我将说明JQuery插件常用的写法，以及这些插件的常用场景。希望对大家有所帮助。先准备了自己以前写过的一个火车票列表的页面，点击"设置样式与事件"出现以下效果。这页面效果直接用Js代码实现的，那么在这里我们用插件的方法实现以上效果。页面...

1分钟实现多行文本框[textarea]自动高度jquery 插件【代码】【图】

<div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-5"> 内容</label> <div class="col-sm-9"> <textarea class="col-sm-8" id="form-field-5" placeholder="请输入内容..."></textarea> </div> </div>$.extend({textareaAutosize_dc:function(){$("textarea").on("keyup",function(e){var currentEnterCount=$(this).val().split("\n").length;var lineHeigh...

jquery插件集

自定义滚动条jquery-custom-scrollbar放大镜 fancybox,lightbox,jquery zoom原文：http://www.cnblogs.com/toward-the-sun/p/5583350.html

jquery插件anccordion【代码】

1 (function(){2 $.fn.YAccordion=function(options){3 4var settings={5 trigger:‘click‘,6 speed:300,7 };8 9if(options) 10 $.extend(settings,options); 1112returnthis.each(function(){ 13 $("p",this).bind(settings.trigger,function(){ 14 $(this).next("ul").slideToggle(settings.speed).siblings("ul").hide(); 15 }); 16 ...

解决vue与传统jquery插件冲突

比如基于jquery的select2插件，在vue下单独用有很多问题，其实对于这类插件，可以用vue的自定义指令和组件来包装，解决冲突的问题。引用官方vue1.0和2.0的两个例子，学习一下。例子1.0 例子2.0原文：http://www.cnblogs.com/zhansu/p/6112837.html

jQuery插件开发——全屏切换插件【代码】

这个插件包含三个部分：HTML结构、CSS代码和JS代码。HTML结构是固定的，结构如下： 1 2<div class="fullpage-container"> 3<div class="fullpage-pagebox"> 4<div id="fullpage-page1" class="fullpage-page-vertical"><h1>1</h1></div> 5<div id="fullpage-page2" class="fullpage-page-vertical"><h1>2</h1></div> 6<div id="fullpage-page3" class="fullpage-page-vertical"><h1>3</h1></div> 7<div id="fullpag...

开发jquery插件小结【代码】

用jquery开发插件其实很简单。今天实现了一个入门级别的功能。随便来个DIV，便于理解。 div{height:100px;width:100px;display:block;background:#f00;border-radius:50%;text-align:center;}这个玩意的功能也很常见，CSS3的旋转，鼠标放上去他能转，度数，速度都是参数。坦白将这个项目没多大卵用，CSS hover就能实现，虽然多了会写的麻烦，毕竟练手项目，第一个插件，不能要求太高。上代码： 1 <script type="text/javascri...

学写jQuery插件开发方法

jQuery如此流行，各式各样的jQuery插件也是满天飞。你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢？如果你的答案是肯定的，那么来吧！和我一起学写jQuery插件吧！很多公司的前端设计开发人员都是女孩子，而这些女孩子很多JavaScript技能都不是很好。而前端开发过程中，JavaScript技能又是必不可少的。所以，如果前端小MM正在为某个JavaScript效果发愁的时候，你潇洒的过去，然后对她说：“嗨，美女，用这个吧。这是我写...

锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]【代码】【图】

1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery可以为后来的元素绑定事件类似于jQuery中的live()方法 4.jQuery UI 5.jQuery Cookie 6.遮罩层插件:thickbox 7.编写jQuery插件<1>编写插件的目的：给已经有的一些列方法或函数做一个封装，一遍在其他地方使用，方便后期维护和提高开发效率。 <2>三种类型的插件a:封装对象方法的插件　　jQuery.fn.extend()b:封装全局函数的插件　　jQuery.extend()c:选择器插...

关于jQuery插件imgAreaSelect基础讲解【代码】【图】

关于ImgAreaSelect, 是一jQuery插件，它支持用户通过鼠标拖曳选择图片的一部分，如图片拖曳、图片编辑等~~来具体看一下1、先下载imgAreaSelect插件下载地址：英文：http://odyniec.net/projects/imgareaselect/中文：http://www.css88.com/EasyTools/javascript/jQueryPlugin/imgAreaSelect/index.html在头部引用：<link rel="stylesheet" type="text/css" href="../jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" ...

将代码转化成jQuery插件

将类似的jQuery代码，转化为插件，可以提高代码的重用性，并能够有效的组织代码。(function($){$.fn.yourPluginName=function(){//Your code goes herereturn this;} })(jQuery)总结以便之后查阅。原文：http://blog.csdn.net/comeonstone/article/details/38515765

JQUERY - 技术教程分类

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链 jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Tooltip jQuery Treeview jquery 全部

JQUERY - 最热教程

javascript中html字符串转化为jquerydo...js批量设置元素样式和封装似于jquery的...使用jquery获取url及url参数的方法 jQuery取消ajax请求的方法 jquery中根据获取元素的6种方法总结如何通过jQuery添加新的内容 jQuery和ajax实现鼠标单击修改内容的方...基于JSON格式数据的简单jQuery幻灯片插...jquery设置内联样式css()js调用iframe实现打印页面内容的方法_j...

首页 / JQUERY / jquery插件treegrid树状表格的使用方法详解（.Net平台）

jquery插件treegrid树状表格的使用方法详解（.Net平台）

内容导读

内容图文

内容总结

内容备注

内容手机端

【jquery插件treegrid树状表格的使用方法详解（.Net平台）】教程文章相关的互联网学习教程文章

实用的placeholder插件，兼容IE下的placeholder，jquery插件【代码】

jQuery插件扩展方法【代码】

跟我一起学JQuery插件开发【代码】【图】

15个超级实用的jQuery插件

自己动手JQuery插件开发【代码】【图】

1分钟实现多行文本框[textarea]自动高度jquery 插件【代码】【图】

jquery插件集

jquery插件anccordion【代码】

解决vue与传统jquery插件冲突

jQuery插件开发——全屏切换插件【代码】

开发jquery插件小结【代码】

学写jQuery插件开发方法

锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]【代码】【图】

关于jQuery插件imgAreaSelect基础讲解【代码】【图】

将代码转化成jQuery插件

JQUERY - 相关标签

NET - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程