bootstrap-table-editable 小结

先贴一个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清单

  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/bootstrap-table.css" rel="stylesheet">
  <link href="css/bootstrap-editable.css" rel="stylesheet">

  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/bootstrap-table.js"></script>
  <script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
  <script type="text/javascript" src="js/bootstrap-table-editable.js"></script>
  <script type="text/javascript" src="js/bootstrap-editable.js"></script>

前端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["*****"]