.Net Mvc实现各种表格随意切换插件

最新推荐文章于 2020-11-26 10:11:43 发布

anpo2583

最新推荐文章于 2020-11-26 10:11:43 发布

阅读量168

点赞数

文章标签：测试 javascript json ViewUI

原文链接：http://www.cnblogs.com/code68/p/7505581.html

版权

本文介绍了一套使用Js面向对象封装的代码，通过简单的参数修改即可实现在FlextGrid、Bootstrap Table和jqGrid等不同表格样式间的切换。该方案支持自定义表格列配置，并提供了查询功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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