bootstrap-table+model+ajax实现表格管理

table的呈现

• 前端

<div class="col-sm-12 panel panel-default table-responsive">
        <table id="tabAll" class="table  table-condensed"></table>
    </div>

• ajax请求获取数据

function getTable(res) {
            operateEvents = {
                'click .btnEdit': function (e, value, row, index) {
                    if (res) {
                        edit(row);
                    }
                    else {
                        alert('You do not have permission');
                    }

                }
            }
            $('#tabAll').bootstrapTable({
                url: 'ajax/ActionHandler.ashx?action=getDataConveyor',
                dataType: "json",
                search: true,
                //showExport: true,
                pagination: true,
                pageSize: 15,
                pageList: [15, 20, 40],
                contextMenu: '#example1-context-menu',
                onClickRow: function (row, $el) {
                    $('#tabAll').find('.error').removeClass('error');
                    $el.addClass('error');

                },
                onContextMenuItem: function (row, $el) {
                    if (res) {
                        if ($el.data("item") == "Spare") {
                            AddMaintenance(row);
                        } 
                    }
                    else {
                        alert('You do not have permission');
                    }
                },
                columns: [
                    {
                        field: 'con_id',
                        title: '资产编号',
                    }, {
                        field: 'con_name',
                        title: '品名',
                    }, {
                        field: 'current_loc',
                        title: '当前位置',
                    }, {
                        field: 'size',
                        title: '规格(米)',
                    }, {
                        field: 'con_spec',
                        title: '规格(单轨/双轨)',
                    }, {
                        field: 'seg_spec',
                        title: '规格(单段/双段)',
                    }, {
                        field: 'declar_no',
                        title: '报关单号',
                    }, {
                        field: 'max_size',
                        title: '最大调宽尺寸(毫米)',
                    }, {
                        field: 'con_date',
                        title: '签收日期',
                    },
                    {
                        field: 'operate',
                        title: '编辑',
                        width: 80,
                        align: 'center',
                        events: operateEvents,
                        formatter: operateFormatter,
                    }
                ]
            });
        }

• ActionHandler.ashx?action=getDataConveyor方法

public void ProcessRequest(HttpContext context)
        {
            var res = context.Response;
            var action = context.Request.QueryString["action"];
            res.ContentType = "text/plain";
            try
            {
                var admin = context.Request.Cookies["admin"].Value;
                if (admin == "1")
                {
                    switch (action)
                    { 
                         case "getDataConveyor":res.Write(BLL.bll_Conveyor.getData());break;
                    }
                }
                else if (admin=="0")
                {
                    switch (action)
                    {
                        //case "getDataConveyor": res.Write(BLL.bll_Conveyor.getData()); break;
                    }
                }
            }
            catch (Exception ex)
            {
                res.Write("非法操作！");
            }            

        }

• bll_Conveyor.getData()方法

 public static string getData()
        {
            string sqlStr = @"select con_id,con_name,current_loc,size,con_spec,seg_spec,declar_no,max_size,con_date,operate from conveyor_basic order by con_date desc ";
            return JsonHelper.ToJson(MysqlHelper.ExecuteReader(sqlStr));
        }

update数据

• button事件

 function operateFormatter(value, row, index) {
            return [
                '<button id="edit" type="button" class="btnEdit btn-primary btn-sm " data-toggle="modal" data-target="#myModal">Edit</button>'
            ].join('');
        }

• 点击button获取数据放在input

  function edit(el) {
      $('#myModal').modal({ backdrop: 'static', keyboard: false });
      $('#myModal').on('shown.bs.modal', function () {
          $('#con_id').val(el.con_id);
          $('#con_name').val(el.con_name);
          $('#current_loc').val(el.current_loc);
          con_id = el.con_id;
          current_loc = el.current_loc;
  
      });
  

• 点击button获取表格当列数据放入model的input中

 function edit(el) {
            $('#myModal').modal({ backdrop: 'static', keyboard: false });
            $('#myModal').on('shown.bs.modal', function () {
                $('#con_id').val(el.con_id);
                $('#con_name').val(el.con_name);
                $('#current_loc').val(el.current_loc);
                con_id = el.con_id;
                current_loc = el.current_loc;

            });
        }

• button点击事件,ajax提交表单数据

function saveInfo() {
            $.ajax({
                type: "POST",
                url: "ajax/ActionHandler.ashx?action=editDataConveyor",
                cache: false,
                data: {
                    con_id: $("#con_id").val(),
                    current_loc: $("#<%=edit_loc.ClientID%>").val(),
                },
                success: function (data) {
                    $('#myModal').modal('hide');
                    $("#tabAll").bootstrapTable('refresh');
                },
                error: function () {
                    document.writeln("havn't save data into database!");
                }
            });
        }

• case”editDataConveyor”方法

case "editDataConveyor":res.Write(BLL.bll_Conveyor.editData(getmodelConveyor(context), getmodelLoc(context),getmodelBay(context)));break;

public Model.Conveyor getmodelConveyor(HttpContext context)
        {
            var req = context.Request.Params;
            Model.Conveyor model = new Model.Conveyor
            {
                con_id = req["con_id"],
                current_loc = req["current_loc"]
            };
            return model;
        }
        public Model.Loc_history getmodelLoc(HttpContext context)
        {
            var req = context.Request.Params;
            Model.Loc_history model = new Model.Loc_history
            {
                con_id = req["con_id"],
                history_loc = req["current_loc"]
            };
            return model;
        }

• bll_Conveyor.editData方法

public static bool editData(Model.Conveyor model,Model.Loc_history model2,Model.MaintenanceInfo model3)
        {
            return dal.Update(model,model2,model3);
        }

• dal.Update(model,model2,model3)方法

public bool Update(moonshine.Model.Conveyor model,moonshine.Model.Loc_history model2,moonshine.Model.MaintenanceInfo model3)
        {
            //update conveyor_basic
            StringBuilder strSql = new StringBuilder();
            strSql.Append("update conveyor_basic set ");

            if(model.current_loc!=null)
            {
                strSql.Append("current_loc='" + model.current_loc + "',");

            }
            else
            {
                strSql.Append("current_loc=null ,");
            }
            int n = strSql.ToString().LastIndexOf(",");
            strSql.Remove(n, 1);
            strSql.Append(" where con_id='" + model.con_id + "'");
            int rowsAffected = MysqlHelper.ExecuteNonQuery(strSql.ToString());

            StringBuilder str = new StringBuilder();
            str.Append("update maintenance set ");
            if (model3.bay != null)
            {
                str.Append("bay='" + model3.bay + "',");
            }
            else
            {
                str.Append("bay=null,");
            }
            int no = str.ToString().LastIndexOf(",");
            str.Remove(no, 1);
            str.Append(" where con_id='" + model3.con_id + "'");
            int row = MysqlHelper.ExecuteNonQuery(str.ToString());

            //add loc_data
            StringBuilder strSql1 = new StringBuilder();
            StringBuilder strSql2 = new StringBuilder();
            StringBuilder strSql3 = new StringBuilder();
            if (model2.con_id!=null)
            {
                strSql2.Append("con_id,");
                strSql3.Append("'" + model2.con_id + "',");
            }
            if(model2.history_loc!=null)
            {
                strSql2.Append("history_loc,");
                strSql3.Append("'" + model2.history_loc + "',");
            }
            strSql1.Append("insert into loc_data(");
            strSql1.Append(strSql2.ToString().Remove(strSql2.Length - 1));
            strSql1.Append(")");
            strSql1.Append(" values (");
            strSql1.Append(strSql3.ToString().Remove(strSql3.Length - 1));
            strSql1.Append(")");
            int rows = MysqlHelper.ExecuteNonQuery(strSql1.ToString());


            if (rowsAffected > 0)
            {
                if(rows>0&&row>0)
                {
                    return true;
                }
                else
                {
                    return false;
                }

            }
            else
            {
                return false;
            }
        }

效果