bootstrap table

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_33704704/article/details/86540197

引入

<link rel="stylesheet" href="../bootstrap/table/bootstrap-table.css">

<script src="../bootstrap/table/bootstrap-table.min.js"></script>

<script src="../bootstrap/table/bootstrap-table-zh-CN.js"></script>

示例

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

 

$('#table').bootstrapTable({

    columns: [{

        field: 'id',

        title: 'Item ID'

    }, {

        field: 'name',

        title: 'Item Name'

    }, {

        field: 'price',

        title: 'Item Price'

    }],

    data: [{

        id: 1,

        name: 'Item 1',

        price: '$1'

    }, {

        id: 2,

        name: 'Item 2',

        price: '$2'

    }]

});

Bootstraptable隐藏某列

columns: [{

                   checkbox: true, 

                   visible: true                  //是否显示复选框 

               }, {

                      field: 'id',

                      visible: false,

                      title: 'id'

                  }]

Bootstraptable实现拖拽

引入

<script src="../bootstrap/table/reorder-rows/bootstrap-table-reorder-rows.js"></script>

<script src="../bootstrap/table/reorder-rows/jquery.tablednd_0_5.js"></script>

示例

<table id="sceneJobGird"></table>

 

$('#sceneJobGird').bootstrapTable({

               url: '${projectName}/netSceneJob/getSceneJobInfo.do',

               cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)

               pagination: true,                   //是否显示分页(*)

               toolbar: '#toolbar3',

               pageNumber: 1,                      //初始化加载第一页,默认第一页,并记录

               pageSize: 8,                     //每页的记录行数(*)

               paginationDetailHAlign:"right",          //分页信息隐藏

               search: true,                      //是否显示表格搜索

                 height: $(window).height() - 90,                      //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度

                 uniqueId: "id",                     //每一行的唯一标识,一般为主键列

                  //得到查询的参数

               queryParams : function (params) {

                   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的

                   var temp = {  

                          sceneJob_scene_id: "${sceneJobId}"

                   };

                   return temp;

               },

                  columns: [{

                      field: 'id',

                      visible: false,

                      title: 'id'

                  },{

                      field: 'XXX',

                      visible: false,

                      title: 'XXXID'

                  },{

                      field: 'XXX',

                      visible: false,

                      title: 'XXXid'

                  },{

                      field: 'XXX',

                      visible: false,

                      title: 'XXXid'

                  },{

                      field: 'sort',

                      visible: false,

                      title: '执行顺序'

                  },{

                      field: 'comm',

                      title: '说明'

                  }, {

                      field: '删除',

                      title: '删除',

                      formatter: function actionFormatter(value, row, index) {

                             var id = row.id;

                             var result = "";

                             result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";

                             return result;

                         }

                  }],

               onLoadSuccess: function () {

               },

               onLoadError: function () {

               },

              

           //当选中行,拖拽时的哪行数据,并且可以获取这行数据的上一行数据和下一行数据

            onReorderRowsDrag: function(table, row) {

                dragbeforeidx = $(row).attr("data-index");

            },

            //拖拽完成后的这条数据,并且可以获取这行数据的上一行数据和下一行数据

            onReorderRowsDrop: function (table, row) {

                draglateridx = $(row).attr("data-index");

            },

            //当拖拽结束后,整个表格的数据

            onReorderRow: function (newData) {

                //这里的newData是整个表格数据,数组形式

                //console.log("------3-----");

                //console.log(newData);

                if (dragbeforeidx != draglateridx) {

                       console.log("执行对排序的修改");

                       $.post("${projectName}/netSceneJob/sortNetSceneJob.do",{jsondata: JSON.stringify(newData)},function(data){

                              //console.log(data);

                              messageAlertShow(data);

                       });

                      

                }

            }

});

 

没有更多推荐了,返回首页