.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树
.Net Mvc实现各种表格随意切换插件的更多相关文章
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- FlexSlider jQuery滑动切换插件 参数
demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...
- 支持10种格式的 HTML 表格导出 jQuery 插件
HTML 表格导出 jQuery 插件可以帮助用户导出 HTML 表格到 JSON.XML.PNG.CSV.TXT.SQL.MS-Word.MS-Excel.MS-PowerPoint 和 PDF 格 ...
- 基于jQuery的对象切换插件：soChange 1.5 (点击下载)
http://www.jsfoot.com/jquery/demo/2011-09-20/192.html 所有参数: $(obj).soChange({ thumbObj:null, //导 ...
- ExtJS4.2学习(13)基于表格的扩展插件---rowEditing
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/182.html --------------- ...
- FlexSlider是一个非常出色的jQuery滑动切换插件
FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- Java实现随意切换VPN改变上网地区
http://www.jb51.net/article/69267.htm 这篇文章主要介绍了Java实现随意切换VPN改变上网地区,本文直接给出实例代码,需要的朋友可以参考下 在很多情况下,有些网络 ...
- 转发-基于ASP.NET MVC 4/5 Razor的模块化/插件式架构实现
基于ASP.NET MVC 4/5 Razor的模块化/插件式架构实现 概述 在日常开发中, 我们经常谈起模块化/插件化架构,这样可既可以提高开效率,又可以实现良好的扩展性,尤其对于产品化的系统有 ...
随机推荐
- 移动端APP页面Webview模式跳转详解
首先,来看一下关于Android home键和back键区别 back键 Android的程序无需刻意的去退出,当你一按下手机的back键的时候,系统会默认调用程序栈中最上层Activity的Dest ...
- Android中的内容提供者
Android中的内容提供者 为什么需要内容提供者 为了跨程序访问数据.试想如果在App-1中创建了一个私有数据库,App-2是不能直接访问的.因为权限不够,虽然可以使用chmod 777来修改权限, ...
- 引水入城[NOI2010 ]
题目描述 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个N行M列的矩形,如上图所示,其中每个格子都代表一座城市,每座城市都有一个海拔高度. 为了 ...
- Spring初始化ApplicationContext线程托管实际运用架构构思
今天我分享一个技术点,利用Spring初始化+线程接管进行程序启动后保持会话状态. 先来一段@test单元测试注解,后台开发的很熟悉,这是测试局部代码用的: @RunWith(SpringJUnit4 ...
- vue-router的使用
关于vue-router的基本使用方法 首先,需要下载vue-router npm install vue-router --save vue-router在html或组件中的展现 ``` &l ...
- BaseAction 使用
public class AreaAction extends BaseAction<Area> { @Autowired private AreaService areaService; ...
- MySQL数据库IO问题
--MySQL数据库IO问题 ----------------------2014/05/25 看http://www.mysqlperformanceblog.com 的时候,发现Perco ...
- Linux内存详解
--Linux内存详解 -----------------2014/05/24 Linux的内存上表现的不像windows那么直观,本文准备详细的介绍一下Linux的内存. 请看这下有linux命令f ...
- Selenium2 (python)
包名:selenium 支持浏览器:Firefox,InternetExplorerDriver,OperaDriver,Chrome(要使用一种浏览器应下载相应的driver驱动) 一.基本命令 d ...
- Hadoop集群环境搭建(一)
1集群简介 HADOOP集群具体来说包含两个集群:HDFS集群和YARN集群,两者逻辑上分离,但物理上常在一起 HDFS集群: 负责海量数据的存储,集群中的角色主要有 NameNode / DataN ...