.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树

在线体验