.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的模块化/插件式架构实现 概述 在日常开发中, 我们经常谈起模块化/插件化架构,这样可既可以提高开效率,又可以实现良好的扩展性,尤其对于产品化的系统有 ...
随机推荐
- Vivado完成综合_实现_生成比特流后发出提醒声音-原创☺
之前做技术支持时,有过客户吐槽Vivado运行时间长,又不能在完成工作后发送提醒,这两天又有人提起,所以决定写篇帖子. 大家知道,Vivado的技术文档总提及tcl,不过似乎很不招人待见,很少有人研究 ...
- 25. leetcode 217. Contains Duplicate
217. Contains Duplicate Given an array of integers, find if the array contains any duplicates. Your ...
- hdu 6047 Maximum Sequence（贪心）
Description Steph is extremely obsessed with "sequence problems" that are usually seen on ...
- Java Struts图片上传至指定文件夹并显示图片
继上一次利用Servlet实现图片上传,这次利用基于MVC的Struts框架,封装了Servlet并简化了JSP页面跳转. JSP上传页面 上传一定要为form加上enctype="mult ...
- hexdump命令的使用
hexdump命令是Linux下的打印16进制的利器,它可以按我们指定的格式输出16进制,特别有用,配合eeprom来用简直是绝配. 今天我们来介绍一个hexdump命令的使用: 首先我们准备一个测试 ...
- 关于mac下配置mysql心得
PS:配置一个mysql烦了一天,不过还是有所收获. 首先,下载安装我就不多啰嗦了.关键是在我们安装的最后会有一个临时密码,例如我的PBxsy=ES71(u: 这是非常重要的信息,如果没有得到的话,建 ...
- HDU 6006 Engineer Assignment：状压dp
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6006 题意: 在Google中,有个n项目,m个专家.第i个项目涉及c[i]个领域,分别为a[i][0 ...
- Apriori关联分析算法概述
概念 关联分析:从大规模数据集中寻找物品间的隐含关系.物品间关系又分为两种:频繁项集或关联规则,频繁项集是经常出现一块的物品集合:关联规则则暗示物品间存在很强的联系 关联评判标准:支持度和可信度.支持 ...
- python web环境相关
一. apache配置与支持cgi 1. 配置文件 Apache是一个后台运行的程序,没有界面.所有的配置,都包含在配置文件里.主配置文件是: ~\Apache\conf\httpd.conf 如果要 ...
- MySQL连接问题【mysql_connect和mysql_pconnect区别】
--MySQL连接问题[mysql_connect和mysql_pconnect区别] -------------------------------------------------------- ...