一套Js代码,。只要改参数 在3种表格之间任意切换-(使用Js面向对象封装,可重写方法)

任意表格皮肤随便切换 flextgrid/bootstrapt/jqgrid

1  
001 @{
002     Layout = null;
003 }
004  
005 <!DOCTYPE html>
006  
007 <html>
008 <head>
009     <meta name="viewport" content="width=device-width" />
010     <title>Test</title>
011 </head>
012 <body>
013  
014  
015    
016 <input type="button" value="查询" onclick="curmodelCRUD.search();" />
017      
018  
019          
020         <table id="grid" ></table>
021  
022  
023      
024  
025  
026  
027 @Html.Action("Index", "TableGrid", new
028 {
029     adminType = ViewBag.Type,
030     skin = "default"
031 })
032  
033     <script>
034  
035     var curmodelCRUD;
036     $(function () {
037         var modelCRUD = baseCRUD.extend({
038             /*渲染列表*/
039             initList: function () {
040                 var columns = [
041                     {
042                         field: 'userid',
043                         title: '用户Id',
044                         width: "200"
045                     }, {
046                         field: 'username',
047                         title: '用户名',
048                         width: "200",
049                         align: "center",
050                         formatter: function (value, row, index) {
051                             return value;
052                         }
053                     }, {
054                         field: 'departmentname',
055                         title: '部门',
056                         align: "center",
057                         width: "200",
058                         formatter: function (value, row, index) {
059                             return value;
060                         }
061                     }, {
062                         field: 'mobilephone',
063                         align: "center",
064                         title: '手机',
065                         width: "200",
066                         formatter: function (value, row, index) {
067                              
068                             return value;
069                         }
070                     }
071  
072                 ];
073                 var options = {
074                     id: "#grid",
075                     url: "@ViewBag.pluginsName/Content/test.json",
076                     columns: columns,
077                     showcheckbox:true,
078                     onClickRow: function (row) {
079  
080                     }
081                 };
082                 this.base(options);
083             },
084             searchParm:function(){
085                 var param = {
086                     status: 1
087                 };
088                 return param;
089             },
090             search: function () {
091                 this.base({ params: this.searchParm });
092             }
093         });
094         curmodelCRUD = new modelCRUD();
095         curmodelCRUD.initList();
096     });
097  
098  
099     function getsel() {
100  
101     }
102  
103      
104     </script>
105  
106 </body>
107 </html>

flextgrid版本

在线体验


bootstrapt版本

在线体验


jqgrid版本

在线预览


EasyUI版本

在线预览


bootstrapt tree 表格

在线体验


支持搜索的z-tree树

在线体验

.Net Mvc实现各种表格随意切换插件的更多相关文章

  1. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  2. FlexSlider jQuery滑动切换插件 参数

    demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...

  3. 支持10种格式的 HTML 表格导出 jQuery 插件

    HTML 表格导出 jQuery 插件可以帮助用户导出 HTML 表格到 JSON.XML.PNG.CSV.TXT.SQL.MS-Word.MS-Excel.MS-PowerPoint 和 PDF 格 ...

  4. 基于jQuery的对象切换插件:soChange 1.5 (点击下载)

    http://www.jsfoot.com/jquery/demo/2011-09-20/192.html 所有参数: $(obj).soChange({     thumbObj:null, //导 ...

  5. ExtJS4.2学习(13)基于表格的扩展插件---rowEditing

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/182.html --------------- ...

  6. FlexSlider是一个非常出色的jQuery滑动切换插件

    FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...

  7. jQuery图片切换插件jquery.cycle.js

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...

  8. Java实现随意切换VPN改变上网地区

    http://www.jb51.net/article/69267.htm 这篇文章主要介绍了Java实现随意切换VPN改变上网地区,本文直接给出实例代码,需要的朋友可以参考下 在很多情况下,有些网络 ...

  9. 转发-基于ASP.NET MVC 4/5 Razor的模块化/插件式架构实现

    基于ASP.NET MVC 4/5 Razor的模块化/插件式架构实现   概述 在日常开发中, 我们经常谈起模块化/插件化架构,这样可既可以提高开效率,又可以实现良好的扩展性,尤其对于产品化的系统有 ...

随机推荐

  1. vue获取下拉框值

    vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...

  2. java中io流浅析

    1.java.io包下File类:java程序中的此类的一个对象,就对应着硬盘中的一个文件或网络中的一个资源.File file1 = new File("d:\\io\\helloworl ...

  3. Struts2总结优化登录与转发_02

    优化登录: 使用Struts2中的标签时,会生成大量的tr.td等,决定不使用Struts2中的标签,改用EL表达式,表单有大量数据时,不适合在控制层编写,所以用实体类封装URL中的参数. 控制层代码 ...

  4. 【原创】Easyui tree filter 过滤本地数据无效的原因

    Easyui tree filter 过滤本地数据无效的解决方式    正确使用方式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  5. 转载:vs2010 问题 >LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏

    原文链接:http://www.cnblogs.com/newpanderking/articles/3372969.html >LINK : fatal error LNK1123: 转换到 ...

  6. 银河英雄传说[NOI2002]

    题目描述 公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展.       宇宙历七九九年,银河系的两大军事集团在巴米利恩星域爆发 ...

  7. java中的各种数据类型在内存中存储的方式

    原文地址:http://blog.csdn.net/aaa1117a8w5s6d/article/details/8251456 1.Java是如何管理内存的 java的内存管理就是对象的分配和释放问 ...

  8. python编程基础知识—列表(二)

    3操作列表 3.1 遍历整个列表 使用for循环 cars = ['bmw','audi','toyota','Jeep'] for i in cars: print(i) bmw audi toyo ...

  9. Xmemcached学习笔记

    memcached有三种java客户端 第一种:Com.danga 包下面的memcached,需引入jar(本人用的是memcached-2.5.2.jar 文末附上附件需要的可以下载) 第二种:s ...

  10. Java入门——(1)Java编程基础

    Java入门--(1)Java编程基础 第二章 Java编程基础   JAVA 代码的基本格式: 修饰符 class 类名{ 程序代码 }   2.1关键字:赋予了特殊含义的单词.   2.2标识符: ...