摆脱控件之新手2

上一篇说了用IList显示了表格数据，其实从某种说法上并不是很好的摆脱，这篇主要是用jq的each循环输出

思路是：获取数据，当然我的还是DataSet，需要转换（输出json数据，不知大家有什么好的方法介绍），之后由一个全局变量输出到前台的一个隐藏的input中，然后jq获取这个input操作，循环输出。

后台.cs

DataSet ds = bll.GetPageList(pagesize, page, "", "Id desc");

//dataset.table[0]转换成json数据
JsonText = DataTableToJson(ds.Tables[0]);

 DataTableToJson方法

public static string DataTableToJson(DataTable table)
{
       JavaScriptSerializer Js = new JavaScriptSerializer();
        ArrayList aList = new ArrayList();
        foreach (DataRow row in table.Rows)
        {
                Dictionary<string, object> drow = new Dictionary<string, object>();
                foreach (DataColumn column in table.Columns)
                {
                    drow.Add(column.ColumnName,row[column.ColumnName]);
                }
                aList.Add(drow);
        }
         return Js.Serialize(aList);
}

 前台的

隐藏的input

<input id="Json" value='<% =JsonText %>' type="hidden" />

 这里有个问题：value="<% =JsonText %>"这个地方奇怪，有时是（''）,但是有时需要（""），知道原因的可以说下

之后的就是jq操作获取到的json数据了

<script type="text/javascript">
            $(function() {
                //获得后台传过来的值
                var json = $("#Json").val();
                //转换成Jquery对象，用each方法
                var $json = JSON.parse(json);
                $.each($json, function() {
                var Thehtml = "<tr class=\"tr_bg\">";
                Thehtml += "<td align=\"center\"><span class=\"checkall\"><input type=\"checkbox\"  id=\"rptList_ctl02_cb_id\"></span></td>";
                Thehtml += "<td align=\"center\"><span id=\"rptList_ctl02_lb_id\">" + this["Id"] + "</span></td>";
                Thehtml += "<td><a href=\"Edit.aspx?id=" + this["Id"] + "\">" + this["Title"] + "</a></td>";
                Thehtml += "<td align=\"center\"></td>";
                Thehtml += "<td align=\"center\">" + this["SortId"] + "</td>";
                Thehtml += "<td align=\"center\"><span><a href=\"edit.aspx?id=" + this["Id"] + "\">修改</a></span></td>";
                Thehtml += "</tr>";
                $("table tbody").append(Thehtml); 
                })
            })
</script>

 这里要说的是，贴出的并不是完整代码，只是一种思路，要完整代码可以下载源码查看

源码下载（数据库可以自动附加，不用手动附加的vs2008，sql2005）