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

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

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

1  
001 @{
002     Layout = null;
003 }
004  
005
006  
007 <html>
008 <head>
009     <meta name="viewport" content="width=device-width" />
010     <title>Testtitle>
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树

在线体验

 

转载于:https://www.cnblogs.com/code68/p/7505581.html

你可能感兴趣的:(.Net Mvc实现各种表格随意切换插件)