一套Js代码，。只要改参数 在3种表格之间任意切换-（使用Js面向对象封装,可重写方法）
任意表格皮肤随便切换 flextgrid/bootstrapt/jqgrid
1 |
001 | @{ |
002 | Layout = null; |
003 | } |
004 |
005 | <!DOCTYPE html> |
006 |
007 | <html> |
008 | <head> |
009 | <metaname="viewport"content="width=device-width"/> |
010 | <title>Test</title> |
011 | </head> |
012 | <body> |
013 |
014 |
015 | |
016 | <inputtype="button"value="查询"onclick="curmodelCRUD.search();"/> |
017 | |
018 |
019 | |
020 | <tableid="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实现各种表格随意切换插件
原文地址：http://www.cnblogs.com/code68/p/7505581.html