Bootstrap-table 增删改查

前端之家收集整理的这篇文章主要介绍了Bootstrap-table 增删改查前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.引入bootstarp-table 系类的js/css文件

    @*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组件以及中文包的引用*@
    <script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
    <link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
    <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

2.定义一个空的table

<table id="madArea_table"></table>

3.对table 初始化的js

$(function () {
  //1.初始化Table
  var oTable = new TableInit();
  oTable.Init();
}
var TableInit = function () {
  var oTableInit = new Object();
  //初始化Table
  oTableInit.Init = function () {
    $(‘#madArea_table‘).bootstrapTable(‘destroy‘);
    $(‘#madArea_table‘).bootstrapTable({
      url: path,method: ‘post‘,//请求方式
      sortName: "createTime",sortOrder: "desc",striped: true,// 是否显示行间隔色
      pagination: true,// 是否分页
      search: false,showExport: false,queryParams: queryParams,//传递参数(*)
      columns: [{
        checkBox: true
      },{
          title: ‘序号‘,//标题  可不加
          align: "center",formatter: function (value,row,index) {
            return index + 1;
          }
        },{
          field: ‘name‘,title: ‘名称‘
        },{
          field: ‘area‘,title: ‘划分‘
        },{
          field: ‘Code‘,title: ‘代码‘
        },{
          field: ‘createTime‘,title: ‘创建时间‘,sortable: true
        }]
    });
  };

  return oTableInit;
};

//得到查询的参数
function queryParams(params) {
  var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
    pageNum: Math.round((params.offset + params.limit) / params.limit),pageSize: params.limit,//名称
    name: $("#input_name").val(),//划分
    area: $("#input_area").val(),};
  return temp;
}

猜你在找的Bootstrap相关文章