ASP.NET 通过jquery+ajax为gridview绑定数据源

问题： ajax请求的数据在gridview上显示不出来

我被这个问题困扰了好几天,为啥呢?因为gridview它和table不一样,解析出来的html没有thead,手动为其添加thead之后,还要把tbody删掉,完了就是bootstrap-table的data死活显示不出来,我就卡在这里了,得到的是json对象,可显示却永远都是几条横线,我的内心在崩溃边缘，后来才知道ajax获取到数据之后还必须转换为json对象．

分析

• 首先, 要去检查

  data-field

  和

  DataTable

  有没有对应,一定要对应,如果data-field找不到对应的列就会显示一条横线;这里需要仔细一点;

• 其次就是获取到的json对象,就算

  dataType:\'json\'

  也要去转换

  JSON.parse(data.d)

  .将其转换为一个对象．

解决

前台

很简单啊,我的天,昨晚我尝试了n种方法,熬夜到两点,我的心态崩了. 因为要控制列的显示,需要给列添加data-field,我建议不要用插件操作控件了,真的太费精神了.

var theadth = $(\'#<%=gv_Detail.ClientID%>\').find(\"th\");theadth.find(\"div:eq(0):contains(\'文件编号\')\").parent(\"th\").attr(\"data-field\", \'FileID\');theadth.find(\"div:eq(0):contains(\'File\')\").parent(\"th\").attr(\"data-field\", \'FileID\');theadth.find(\"div:eq(0):contains(\'客户名称\')\").parent(\"th\").attr(\"data-field\", \'ClientName\');theadth.find(\"div:eq(0):contains(\'Customer\')\").parent(\"th\").attr(\"data-field\", \'ClientName\');theadth.find(\"div:eq(0):contains(\'产品描述\')\").parent(\"th\").attr(\"data-field\", \'ProdDescription\');theadth.find(\"div:eq(0):contains(\'Description\')\").parent(\"th\").attr(\"data-field\", \'ProdDescription\');theadth.find(\"div:eq(0):contains(\'FAPN\')\").parent(\"th\").attr(\"data-field\", \'FAPN\');theadth.find(\"div:eq(0):contains(\'FAPN\')\").parent(\"th\").attr(\"data-field\", \'FAPN\');//or nottheadth.find(\"div:eq(0):contains(\'NPPP\')\").parent(\"th\").attr(\"data-field\", \'NPPP\');theadth.find(\"div:eq(0):contains(\'NPPP\')\").parent(\"th\").attr(\"data-field\", \'NPPP\');//or nottheadth.find(\"div:eq(0):contains(\'图纸编号及版本\')\").parent(\"th\").attr(\"data-field\", \'PaperID\');theadth.find(\"div:eq(0):contains(\'Drawing\')\").parent(\"th\").attr(\"data-field\", \'PaperID\');theadth.find(\"div:eq(0):contains(\'可能的产品过程设计\')\").parent(\"th\").attr(\"data-field\", \'ProcessDesign\');theadth.find(\"div:eq(0):contains(\'Manufacturing\')\").parent(\"th\").attr(\"data-field\", \'ProcessDesign\');theadth.find(\"div:eq(0):contains(\'申请人\')\").parent(\"th\").attr(\"data-field\", \'Badge\');theadth.find(\"div:eq(0):contains(\'Applicant\')\").parent(\"th\").attr(\"data-field\", \'Badge\');theadth.find(\"div:eq(0):contains(\'申请结果\')\").parent(\"th\").attr(\"data-field\", \'Result\');theadth.find(\"div:eq(0):contains(\'Apply Conclusion\')\").parent(\"th\").attr(\"data-field\", \'Result\');theadth.find(\"div:eq(0):contains(\'结束时间\')\").parent(\"th\").attr(\"data-field\", \'EndDate\');theadth.find(\"div:eq(0):contains(\'End\')\").parent(\"th\").attr(\"data-field\", \'EndDate\');theadth.find(\"div:eq(0):contains(\'审批结论\')\").parent(\"th\").attr(\"data-field\", \'SumResult\');theadth.find(\"div:eq(0):contains(\'Approve Conclusion\')\").parent(\"th\").attr(\"data-field\", \'SumResult\');theadth.find(\"div:eq(0):contains(\'状态\')\").parent(\"th\").attr(\"data-field\", \'state\');theadth.find(\"div:eq(0):contains(\'Status\')\").parent(\"th\").attr(\"data-field\", \'state\');theadth.find(\"div:eq(0):contains(\'操作\')\").parent(\"th\").attr(\"data-field\", \'operation\');theadth.find(\"div:eq(0):contains(\'Operation\')\").parent(\"th\").attr(\"data-field\", \'operation\');//加上thead  删除tbody$(\"#<%=gv_Detail.ClientID %>\").find(\"tbody\").before(\"<thead ></thead\");//添加theadvar tr = $(\"#<%=gv_Detail.ClientID %>\").find(\"tr:first-child\").remove();//移除第一行的tr$(\"#<%=gv_Detail.ClientID %>\").find(\"thead\").append(tr);//将获取的第一行tr变成标题$(\"#<%=gv_Detail.ClientID %>\").find(\"tbody\").remove();//set data-field attribution end$(\'#<%=gv_Detail.ClientID%>\').find(\'tbody\').remove();$(\'#<%=gv_Detail.ClientID%>\').find(\'tfoot\').remove();$.ajax({type: \"post\",url: \"Query.aspx/GetTable\",contentType: \"application/json; charset=utf-8\",dataType: \"json\",data: \"{\'id\':\'1\'}\",async: false,success: function (data) {$(\"#<%=gv_Detail.ClientID %>\").bootstrapTable({data: JSON.parse(data.d),cache: false,pagination: true,//是否分页pageSize: 5,//初始化分页 显示5条数据pageList: [5, 10, 20, 50],//分页的组minimumCountColumns: 2,//最少显示列数search: true,//是否显示搜索框 启用搜索showColumns: true,//是否显示下拉框 控制列显示的下拉框showColumnsToggleAll: true,//显示全选showSearchButton: true,//显示搜索按钮columns: [{field: \'FileID\',visible: true},{field: \'ClientName\',visible: false},{field: \'ProdDescription\',visible: false},{field: \'FAPN\',//\"FAPN\",\"NPPP\" \"ProcessDesign\" \"EndDate\" ,visible: false}, {field: \'NPPP\',visible: false},{field: \'PaperID\',visible: true}, {field: \"ProcessDesign\",visible: false},{field: \"Badge\",visible: true},{field: \"Result\",visible: true},{field: \"EndDate\",visible: false}, {field: \"SumResult\",visible: true}, {field: \"state\",visible: true}, {field: \"operation\",visible: true}]});}, error: function () { alert(\'error\');}})

后台

[WebMethod]public static string GetTable(string id){if (id == \"1\"){DataTable dt = new SqlHelper().GetTeamData();return DataTableToJson(dt);}else{return null;}}public static string DataTableToJson(DataTable dt){JavaScriptSerializer jss = new JavaScriptSerializer();System.Collections.ArrayList dic = new System.Collections.ArrayList();foreach (DataRow dr in dt.Rows){System.Collections.Generic.Dictionary<string, object> drow = new System.Collections.Generic.Dictionary<string, object>();foreach (DataColumn dc in dt.Columns){drow.Add(dc.ColumnName, dr[dc.ColumnName]);}dic.Add(drow);}//序列化return jss.Serialize(dic);}

再叨叨几句

使用bootstrap-table 的table的格式必须要有

thead

,这个很重要,之后没怎么用过table,如果使用的是table标签必须要有thead,thead里有tr,tr里有th.像下面这样:

<table id=\"tableDemo\"><thead><tr><th data-field=\"FileID\">文件编号</th><th data-field=\"customer\">客户名称</th><th data-field=\"description\">产品描述</th><th data-field=\"paperID\">图纸编号</th><th data-field=\"change\">设计更改</th><th data-field=\"checkDate\">更新时间</th><th data-field=\"updateBy\">更新人</th></tr></thead></table>

dataType必须是json,这个很重要,因为bootstrap-table它只接收json对象

dataType:\"json\"

.而不是一个字符串．这里一定要记清楚．

扩展 evla()和JSON.parse()

• JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
• eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。
• JSON.stringify()的作用是将 JavaScript 对象转换为 JSON字符串，而JSON.parse()可以将JSON字符串转为一个对象。
• 在使用JSON.parse()需要注意一点，由于此方法是将JSON字符串转换成对象，所以你的字符串必须符合JSON格式，即键值都必须使用双引号包裹：

参考文章

呜呜呜呜呜呜呜大声哭出来,我tm感觉自己是个智障…
周末因为这个都没吃好睡好…

然后我扩展了一下，添加了操作按钮，详细见另一篇笔记，记录了整个过程和常见问题。
ASP.NET WebForm 如何使用 Jquery+ajax+bootstrap-table 应用到gridview？