bootstrap table 以及xEdittable的应用

以前一直没有用过 bootstrap 表格框架，因为项目css框架用的是bootstrap，为考虑到统一性的原因，所以选用了这个框架

步骤：

　　第一步：引用

<link href="../../../lib/bootTable/css/bootstrap-table.css" rel="stylesheet" type="text/css" />

<link href="../../../lib/bootTable/css/bootstrap-editable.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../../../lib/jquery/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="../../../js/jquery.query.js"></script>

<script type="text/javascript" src="../../../lib/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript" src="../../../lib/bootTable/js/bootstrap-table.js"></script>

<script type="text/javascript" src="../../../lib/bootTable/js/bootstrap-table-editable.js"></script>

<script type="text/javascript" src="../../../lib/bootTable/js/bootstrap-editable.js"></script>

<script type="text/javascript" src="../../../lib/bootTable/js/bootstrap-table-zh-CN.js"></script>

<script type="text/javascript" src="../../../lib/bootstrap_datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

<script type="text/javascript" src="../../../lib/bootstrap_datetimepicker/js/bootstrap-datetimepicker.zh-CN.js"></script>

　　第二步：表格开始（初始化）

    function initTable(){

        $.fn.editable.defaults.mode = 'inline';//设置编辑模式，编辑的时候显示在表格内还是外部，默认是外部

        $('#tbl').bootstrapTable({

            toolbar: '#toolbar',                //工具按钮用哪个容器

            striped: true,                      //是否显示行间隔色

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

            pagination: true,                   //是否显示分页（*）

            sortable: false,                     //是否启用排序

            sortOrder: "asc",                   //排序方式

            //queryParams: oTableInit.queryParams,//传递参数（*）

            sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）

            //pageNumber:1,                       //初始化加载第一页，默认第一页

            pageSize: 10,                       //每页的记录行数（*）

            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）

            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大

            strictSearch: true,

            showColumns: true,                  //是否显示所有的列

            showRefresh: true,                  //是否显示刷新按钮

           // minimumCountColumns: 2,             //最少允许的列数

            clickToSelect: true,                //是否启用点击选中行

            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度

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

            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮

            cardView: false,                    //是否显示详细视图

            detailView: false,                   //是否显示父子表,

            onClickRow:function(row,$element){

                console.log(row);

                curRow=row;

            },

            columns: [{

                checkbox: true

            },{

                field: 'id',

                title: 'Item ID',

                visible:false

            }, {

                field: 'article_name',

                title: '废弃物品类型',

                editable:true

            }, {

                field: 'circulation_date',

                title: '流转时间',

                editable:true,

            }, {

                field: 'position',

                title: '位置',

                editable:true,

            }, {

                field: 'state',

                title: '处理状态',

                editable:true,

            }, {

                field: 'handle_people',

                title: '处理人',

                editable:true,

            }, {

                field: 'accessory_address',

                title: '附件',

                editable:true,

            }, {

                field: 'entry_time',

                title: '进库时间',

                editable:true,

            }, {

                field: 'process_time',

                title: '处理时间',

                editable:true,

            }],

            data: [],

            onEditableSave: function (field, row, oldValue, $el) {

                //判断是不是新增状态，如果是就不执行操作

                alert();

                $.ajax({

                    type: "post",

                    url: "/Editable/Edit",

                    data: { strJson: JSON.stringify(row) },

                    success: function (data, status) {

                        debugger;

                        if (status == "success") {

                            alert("编辑成功");

                        }

                    },

                    error: function () {

                        alert("Error");

                    },

                    complete: function () {

                    }

                });

            }

        })

    }

第三步：操作（新增，删除，修改，刷新表格）

1、页面一进来，手动刷新

    /*查询*/

    function query(){

        $.ajax({

            url : "ledgerManagement_findLedgerManageMentList.action",

            type:"POST",

            dataType : "json",

            data:{

                articleName:6,

                entryTime:1,

                },

            success : function(data,status) {

                var data=data.resultList

                for(var i=0;i<data.length;i++){

                    _row=data[i];

                    data[i]=eval("("+_row+")");

                }

                $table.bootstrapTable('load', data);//重载表格

            }

        });

    }

2。新增，删除，修改（按钮操作）

    function buttonInit(){

        //新增

        $("#btn_add").click(function(){

            var datas=$table.bootstrapTable("getData");

            if(datas.length>0){

                //判断最后一行是不是有id，如果没有id不操作

                if(!datas[datas.length-1].id){

                    alert("数据不能为空！");

                    return;

                }

            }

            $('#tbl').bootstrapTable('append', {

                id: '',

                article_name: '',

                circulation_date:'',

                position:'',

                state:'',

                handle_people:'',

                accessory_address:'',

                entry_time:'',

                process_time:''

            });

        })

        //删除

        $("#btn_delete").click(function () {

            var idlist = "";//选中所有选中行的id

            var selecRow=$("#tbl").bootstrapTable('getAllSelections');

            if(selecRow.length==0){alert("请选择需要删除的行");return;}

            if (confirm("确认要删除所选行吗？")) {

                idlist=selecRow.reduce(function(o,v,i){

                    if(i!=0){

                        o+=v.id;

                    }else{

                        o+=v.id+";";

                    }

                    return o;

                },"")

                //调用后台删除接口

                $table.bootstrapTable('remove', {field: 'id', values: idlist});

            }

        });

        //取消

        $("#btn_cancel").click(function () {

            var datas=$table.bootstrapTable("getData");

            var strId = datas[datas.length-1].id;//选中所有选中行的id

            if(datas.length>0){

                //判断最后一行是不是有id，如果没有id就删除

                if(!strId){

                    $table.bootstrapTable('remove', {field: 'id', values: strId});

                    return;

                }

            }

        });

    }

新增

编辑

巴特西

bootstrap table 以及xEdittable的应用

最新文章

热门文章