bootstrap table 以及xEdittable的应用

<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: ‘位置‘,{
                field: ‘state‘,title: ‘处理状态‘,{
                field: ‘handle_people‘,title: ‘处理人‘,{
                field: ‘accessory_address‘,title: ‘附件‘,{
                field: ‘entry_time‘,title: ‘进库时间‘,{
                field: ‘process_time‘,title: ‘处理时间‘,}],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 () {

                    }

                });
            }
        })
    }

    /*查询*/
    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);//重载表格
            }
            
        });
    }

    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‘,values: strId});
                    return;
                }
            }
        });
    }