.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的模块化/插件式架构实现 概述 在日常开发中, 我们经常谈起模块化/插件化架构,这样可既可以提高开效率,又可以实现良好的扩展性,尤其对于产品化的系统有 ...
随机推荐
- 四．GC —三分钟认识JAVA回收机制（Java Garbage Collection）
这里以jdk1.8做讲解.Jdk1.8的分代去掉了永久代,只分为新生代(有的也译为年轻代)和年老代. 名词解释: 系统吞吐量:用于处理应用程序处理事务的线程数与用于GC的线程数的比. pause ti ...
- Android学习笔记- ButterKnife 8.0注解使用介绍
前言: App项目开发大部分时候还是以UI页面为主,这时我们需要调用大量的findViewById以及setOnClickListener等代码,控件的少的时候我们还能接受,控件多起来有时候就会有一种 ...
- JVM学习笔记三：垃圾收集器及内存管理策略
垃圾收集器 上文说到了垃圾收集算法,这次我们聊一下HotSpot的具体垃圾收集器的实现,以JDK1.7为例,其包含的可选垃圾收集器如下图: 不同收集器之间的连线,代表它们可以搭配使用,收集器所属的区域 ...
- decode
含义解释: decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下:IF 条件=值1 THEN RETURN(翻译值1)ELSIF 条件=值2 THEN ...
- [补档]暑假集训D1总结
归来 今天就这样回来了,虽然心里极其不想回来(暑假!@#的只有一天啊喂),但还是回来了,没办法,虽然不喜欢这个地方,但是机房却也是少数能给我安慰的地方,心再累,也没有办法了,不如好好集训= = %da ...
- 20. leetcode 171. Excel Sheet Column Number
Given a column title as appear in an Excel sheet, return its corresponding column number. For exampl ...
- c++STL(栈、队列）
栈stack -先入后出FILO 栈可以理解为一个坑,先掉坑里的被压在下面,等上面的走了才能出来 头文件 <stack> 入栈 push(某东西); 栈顶元素出栈 pop(); 是否为空 ...
- 用java调用.net的wcf其实还是很简单的
前些天和我们的一个邮件服务商对接,双方需要进行一些通讯,对方是java团队,而作为.net团队的我们,只能公布出去的是一个wcf的basicbinding,想不 到问题来了,对方不知道怎么去调用这 ...
- 纯干货！华为软件开发云编译构建之Maven
一．Maven介绍 Maven是一个项目管理和整合的工具.Maven为开发者提供了一套完整的构建生命周期框架.开发团队基本不用花多少时间就能自动完成工程的基础构建配置,因为Maven使用了一个标准的目 ...
- [vijos NOIP模拟题]天神下凡 贪心+搜索
样例: 考试的时候没时间打了,随便敲了敲就交上去了,没想到竟然编译错误,忘定义n了23333 自己测了测能骗20分hhhh 考虑每个圆对答案的贡献,当一个圆被小圆内切的时候,分成了两半,对答案的贡献就 ...