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