.Net Mvc实现各种表格随意切换插件

一套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树

在线体验

时间： 2024-07-28 15:40:24

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

后台管理系统模板随意切换插件

后台模块,想换就换, 使用方直接用MVC 方法渲染页面adminType 使用后台的类型skin 皮肤类型 @Html.Action("Index", "AdminManager", new{    adminType = ViewBag.Type,    skin = "default"}) 点击体验 点击体验 easyUI版 在线体验

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

Cycle是一个很棒的jQuery图片切换插件,提供了很好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src

可实现随意切换的button同时随切换改变title的颜色

-(void)addBtn { NSArray *arr = [[NSArray alloc] initWithObjects:@"未使用",@"已使用",@"已付款",@"退款", nil]; for (int i = 0; i < 4; i ++) { UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect]; btn.frame = CGRe

jQuery-图片轮播-随意切换图片

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>图片切换插件Nivo Sl

jQuery banner切换插件

今天学写了一个基于jQuery焦点图切换插件,有不对的地方还请多多指教,不多说下面是代码: 1.引jQuery库 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 2.Html部分 <!--Focus Html--> <div class="s_focus"> <ul class="f_img"> &l

自己编写的轻量级Tabs切换插件

jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div class="tabs"> <ul> <li class="acss" data-box="#panel-1">标签1</li> <li class="bcss" data-box="#panel-2">

jQuery 表格隔行变色插件

jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: 1 ;(function($) { 2 $.fn.extend({ 3 //这里写插件代码 4 }); 5 })(jQuery); 例子:编写一个表格隔行变色插件 JS代码 1. 插件编写 1 //插件编写 2 ;(function($) { 3 $.fn.extend({ 4 "alterBgColor":function(op

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

鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/182.html -------------------------------------------------------------------------------------------- 前一章说了EditorGrid可编辑表格,但是有点不方便,如果数据多的话,一次性保存未免有点不太方便.下面我们来说一个扩展插件rowEditin

MVC 生成PDf表格并插入图片

最近做的项目中有一个功能,将最终的个人信息生成PDF表格,并插入图片.对于没接触过的程序员来说回一片茫然,网上有多种生成PDf的方法,我给大家介绍一下我认为比较简单,好操作的一种. iTextSharp组件 使用方法. 1,引入itextsharp.dll 2,  引入命名空间 ? 1 2 3 using iTextSharp; using iTextSharp.text; using iTextSharp.text.pdf; ? 1 2 3 4 5 6 7 8 9 10 11 12     D