bootstrap-table-editable 小结

来源：互联网发布：京颐集团知乎编辑：程序博客网时间：2024/05/16 15:18

先贴一个json类

using System;using System.Collections.Generic;using System.Web;using System.Web.Script.Serialization;using System.Data;namespace PH.Common{    /// <summary>     /// JSON帮助类     /// </summary>     public class JSONHelper    {        /// <summary>         /// 对象转JSON         /// </summary>         /// <param name="obj">对象</param>         /// <returns>JSON格式的字符串</returns>         public static string ObjectToJSON(object obj)        {            JavaScriptSerializer jss = new JavaScriptSerializer();            try            {                return jss.Serialize(obj);            }            catch (Exception ex)            {                throw new Exception("JSONHelper.ObjectToJSON(): " + ex.Message);            }        }        /// <summary>         /// 数据表转键值对集合         /// 把DataTable转成 List集合, 存每一行         /// 集合中放的是键值对字典,存每一列         /// </summary>         /// <param name="dt">数据表</param>         /// <returns>哈希表数组</returns>         public static List<Dictionary<string, object>> DataTableToList(DataTable dt)        {            List<Dictionary<string, object>> list            = new List<Dictionary<string, object>>();            foreach (DataRow dr in dt.Rows)            {                Dictionary<string, object> dic = new Dictionary<string, object>();                foreach (DataColumn dc in dt.Columns)                {                    dic.Add(dc.ColumnName, dr[dc.ColumnName]);                }                list.Add(dic);            }            return list;        }        /// <summary>         /// 数据集转键值对数组字典         /// </summary>         /// <param name="dataSet">数据集</param>         /// <returns>键值对数组字典</returns>         public static Dictionary<string, List<Dictionary<string, object>>> DataSetToDic(DataSet ds)        {            Dictionary<string, List<Dictionary<string, object>>> result = new Dictionary<string, List<Dictionary<string, object>>>();            foreach (DataTable dt in ds.Tables)                result.Add(dt.TableName, DataTableToList(dt));            return result;        }        /// <summary>         /// 数据表转JSON         /// </summary>         /// <param name="dataTable">数据表</param>         /// <returns>JSON字符串</returns>         public static string DataTableToJSON(DataTable dt)        {            return ObjectToJSON(DataTableToList(dt));        }        /// <summary>         /// JSON文本转对象,泛型方法         /// </summary>         /// <typeparam name="T">类型</typeparam>         /// <param name="jsonText">JSON文本</param>         /// <returns>指定类型的对象</returns>         public static T JSONToObject<T>(string jsonText)        {            JavaScriptSerializer jss = new JavaScriptSerializer();            try            {                return jss.Deserialize<T>(jsonText);            }            catch (Exception ex)            {                throw new Exception("JSONHelper.JSONToObject(): " + ex.Message);            }        }        /// <summary>         /// 将JSON文本转换为数据表数据         /// </summary>         /// <param name="jsonText">JSON文本</param>         /// <returns>数据表字典</returns>         public static Dictionary<string, List<Dictionary<string, object>>> TablesDataFromJSON(string jsonText)        {            return JSONToObject<Dictionary<string, List<Dictionary<string, object>>>>(jsonText);        }        /// <summary>         /// 将JSON文本转换成数据行         /// </summary>         /// <param name="jsonText">JSON文本</param>         /// <returns>数据行的字典</returns>         public static Dictionary<string, object> DataRowFromJSON(string jsonText)        {            return JSONToObject<Dictionary<string, object>>(jsonText);        }    }}

后台webservice

实现规则就是先执行操作再返回操作后的object ，当然要用json处理下。

修改就是返回修改后的object 删除就是返回一个Id相同其它项是null的object

1、显示

 public void GetResourceList()    {        List<PH.Model.Resource> list = new PH.BLL.Resource().GetModelList("1=1");        string strJson = PH.Common.JSONHelper.ObjectToJSON(list);        Context.Response.Write(strJson);        Context.Response.End();    }

2、修改

 public void ModifyResourceList()    {        HttpRequest request = HttpContext.Current.Request;        PH.BLL.Resource pbr = new PH.BLL.Resource();        PH.Model.Resource pmr = pbr.GetModel(int.Parse(request["Id"]));        pmr.Content = request["Content"];        pmr.Length = request["Length"];        pmr.Link = request["Link"];        pmr.Name = request["Name"];        pmr.Title = request["Title"];        pmr.Type = request["Type"];        pmr.UnitId = request["UnitId"];        pbr.Update(pmr);        string strJson = PH.Common.JSONHelper.ObjectToJSON(pmr);        Context.Response.Write(strJson);        Context.Response.End();    }

3、删除

public void RemoveResourceList()    {        HttpRequest request = HttpContext.Current.Request;        PH.BLL.Resource pbr = new PH.BLL.Resource();        pbr.Delete(int.Parse(request["Id"]));        PH.Model.Resource pmr = new PH.Model.Resource();        pmr.Id = int.Parse(request["Id"]);        string strJson = PH.Common.JSONHelper.ObjectToJSON(pmr);        Context.Response.Write(strJson);        Context.Response.End();    }

前端导入css 和 js清单

前端html

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

前端js

 <script type="text/javascript">        $(function () {            $('#table').bootstrapTable({                url: 'Webservice.asmx/GetResourceList',                method: 'post',                contentType: 'application/x-www-form-urlencoded',                toolbar: '#toolbar',                striped: true,                cache: false,                pagination: true,                sortName: 'Id',                sortOrder: 'desc',                sidePagination: 'client',                pageNumber: 1,                pageSize: 50,                pageList: [10, 25, 50, 100],                strictSearch: true,                clickToSelect: true,                height: 600,                uniqueId: 'Id',                cardView: false,                detailView: false,                columns: [{                    field: 'Id',                    title: '编号',                    sortable: true                }, {                    field: 'UnitId',                    title: '单元编号',                    editable: {                        type: 'text',                        validate: function (value) {                            if ($.trim(value) == '') {                                return '单元编号不能为空!';                            }                        }                    }                }, {                    field: 'Name',                    title: '名称',                    editable: {                        type: 'text',                        validate: function (value) {                            if ($.trim(value) == '') {                                return '名称不能为空!';                            }                        }                    }                }, {                    field: 'Link',                    title: '链接',                    editable: {                        type: 'text',                        validate: function (value) {                            if ($.trim(value) == '') {                                return '链接不能为空!';                            }                        }                    }                }, {                    field: 'Type',                    title: '类型',                    editable: {                        type: 'text',                        validate: function (value) {                            if ($.trim(value) == '') {                                return '类型不能为空!';                            }                        }                    }                }, {                    field: 'Length',                    title: '大小',                    editable: {                        type: 'text',                        validate: function (value) {                            if ($.trim(value) == '') {                                return '大小不能为空!';                            }                        }                    }                }, {                    field: 'Title',                    title: '标题',                    editable: {                        type: 'text',                        validate: function (value) {                            if ($.trim(value) == '') {                                return '标题不能为空!';                            }                        }                    }                }, {                    field: 'Content',                    title: '内容',                    editable: {                        type: 'text',                        validate: function (value) {                            if ($.trim(value) == '') {                                return '内容不能为空!';                            }                        }                    }                }, {                    field: 'operation',                    title: '操作',                    width: 100,                    formatter: function (value, row, index) {                        var s = '<a class = "save" href="javascript:void(0)">保存</a>';                        var d = '<a class = "remove" href="javascript:void(0)">删除</a>';                        return s + ' ' + d;                    },                    events: 'operateEvents'                }]            });            window.operateEvents = {                'click .save': function (e, value, row, index) {                    $.ajax({                        type: "post",                        data: row,                        url: 'Webservice.asmx/ModifyResourceList',                        success: function (data) {                            alert('修改成功');                        }                    });                },                'click .remove': function (e, value, row, index) {                    $.ajax({                        type: "post",                        data: row,                        url: 'Webservice.asmx/RemoveResourceList',                        success: function (data) {                            alert('删除成功');                            $('#table').bootstrapTable('remove', {                                field: 'Id',                                values: [row.Id]                            });                        }                    });                }            };        });    </script>

查询 js+

 queryParams: function (params) {        return {            Id: $('#id').val(),            pageSize: params.limit,            offset: params.offset,            sortOrder: params.order,            UnitId: $('#unitid').val(),            Name: $('#name').val()<strong>............................</strong>        }    },    url: '<span style="font-family: Arial, Helvetica, sans-serif;">Webservice.asmx/QueryResourceList</span>'}

后台还是用前面的方法取值

 HttpRequest request = HttpContext.Current.Request; request["*****"]

1 0