对于WebUI,我们经常会用表格去绑顶数据，对于asp.net自带的Gridview显得比较麻烦，这里介绍一个好用的插件jtemplates.js，自定义Table模板，通过Jquery加载数据，简单好用。
1。tmpDetail.htm写上RowData的模板
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
{#foreach $T as record} <tr> <td> {$T.record.SITE} </td> <td> {$T.record.KAREA} </td> <td> {$T.record.S1} </td> <td> {$T.record.S1TO3} </td> <td class="test"> {$T.record.SLT3} </td> <td> {$T.record.S3TO5} </td> <td> {$T.record.S5TO8} </td> <td> {$T.record.S8TO15} </td> <td> {$T.record.SGT15} </td> </tr> {#/for} |
2。Jquery的应用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function DTQuery() { var site = $('input:radio[name=rdo]:checked')[0].value; var bdt = $('#txt_bdt')[0].value; var edt = $('#txt_edt')[0].value; $.ajax({ type: "POST", dataType: "json", contentType: "application/json", data: "{'fab':'" + site + "','bdt': '" + bdt + "','edt': '" + edt + "'}", url: "Handle.aspx/QueryDtl", success: function (data) { //---json 转化为DT var a = jQuery.parseJSON(data.d.Record); // 附上模板 $("#result").setTemplateURL("template/tmpDetail.htm", null, { filter_data: true }); // 给模板加载数据 $("#result").processTemplate(a); }, error: function (data) { var a = data.d; alert(a); } }); }; |
3。Server端的脚本
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
[WebMethod] public static ReturnRecord QueryDtl(string fab, string bdt, string edt) { ReturnRecord record = new ReturnRecord(); string strSQL = string.Format(@".......业务的SQL......"); OraHelper.Init(fab); DataTable dt = OraHelper.Query(OraHelper.OraFab, strSQL); record.Total = dt.Rows.Count; record.Record = Utility.Dtb2Json(dt); } catch (Exception ex) { record.Total = -1; record.Record = ex.Message; } return record; } public class ReturnRecord { public int Total { get; set; } public string Record { get; set; } } |
