• bootstrap-table 的使用


    引用:

     @*1、Jquery组件引用*@
      <script src="~/Scripts/jquery-1.10.2.js"></script>
       @*2、bootstrap组件引用*@
      <script src="~/Content/bootstrap/bootstrap.js"></script>
      <link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />
        
      @*3、bootstrap table组件以及中文包的引用*@
      <!-- Data Tables -->
       <link href="~/Content/bootstraptable/bootstrap-table.css"  rel="stylesheet" />
       <script src="~/Content/bootstraptable/bootstrap-table.js"></script>
       <script src="~/Content/bootstraptable/bootstrap-table-config.js"></script>
       <script src="~/Content/bootstraptable/bootstrap-table-zh-CN.js"></script>

      @*4、页面Js文件的引用*@
       <script src="~/Scripts/Home/Index.js"></script>

    界面:

    <table class="table table-striped" id="Table"></table>

    Index.js:

    $(function () {
        var columns = [{
            field: "choose", checkbox: true, align: "center"
        }, {
            field: 'id',
            title: '序号',
            formatter: function (value, row, index) {
                return index + 1;
            }
        },{
          field: 'CreateTime',
            title: '创建时间'
        }, {
            field: 'CreateMan',
           title: '创建人'
       }, {
           field: 'UpdateTime',
           title: '更新时间',
        }, {
           field: 'UpdateMan',
            title: '更新人'
       }, {
            field: 'operation',
            title: '操作',
            formatter: function (value, row, index) {
                var s = '<a class = "edit" href="javascript:void(0)">编辑</a>';
                var d = '<a class = "Deleted" href="javascript:void(0)">删除</a>';
                var t = '<a class = "ShowAll" href="javascript:void(0)">查看详情</a>';
                return s + ' ' + d + ' ' + t;
            },
            events: 'operateEvents'
        }];
            //初始化Table
            var oTable = new TableInit('#Table', '控制器', columns, 'Id');
            oTable.Init();
        });
    });
    

     

    //operateEvents事件
    window.operateEvents = {
        'click .edit': function (e, value, row, index) {
         //执行内容
       },
        'click .remove': function (e, value, row, index) { 
       //执行内容
       },
        'click .allocationrole': function (e, value, row, index) {
        //执行内容
       }
    }
    
    function DataBaseFunctionSearch(FormId) {
        var FData = $("#" + FormId).serializeArray();
        var data = [];
        for (var i = 0; i < FData.length; i++) {
            if (FData[i].value != "") {
                data.push(FData[i]);
            }
        }
        var result = "";
        for (var i = 0; i < data.length; i++) {
            result += data[i].name + ":" + data[i].value + "█";
        }
        return result.substring(0, result.length - 1);
    }
    

      

  • 相关阅读:
    ZooKeeper实现配置中心的实例(原生API实现)(转)
    com.101tec.ZKClient实现中的subscribeDataChanges设置的监听器事件不回调的问题研究
    Spring Framework体系结构简介
    Spring MVC中@RequestMapping注解使用技巧(转)
    Tomcat配置文件server.xml(转)
    Ubuntu 16.04配置VNC进行远程桌面连接
    Eclipse查看方法/类调用的方法
    MySQL Workbench查看和修改表字段的Comment值
    MySQL常用函数(转)
    MySQL大小写问题的简单说明(关键字/函数/表名)(转)
  • 原文地址:https://www.cnblogs.com/lemonmoney/p/7272493.html
Copyright © 2020-2023  润新知