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;
                }
            }
        });
    }

新增

编辑