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