動態創建easyui控件的渲染問題

　　隨着項目中easyui控件的深入使用，有些特定的場景需要從后端動態生成easyui控件到前端，easyui控件自身有套渲染機制，根據定義的class進行客戶端渲染。

網上有關於這方面的資料介紹（入口），並提供了easyui渲染部分的源代碼，便於更好的了解原理，看到有人回復提出如何使用，結合自己的使用情況，做個簡單的記錄。

     后端代碼如下：

 public static string BuildFilter(int rid)
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("<table>");
            sb.Append("<tr>");
            //0,顯示名稱，1字段名稱、解析參數
            string strSelect = "{0}：<input id = \"{1}\" class=\"easyui-combobox\" name=\"{1}\"  data-options=\"url:'/Business/Common/PharseHandler.ashx?t={1}', method:'get',  valueField:'ID', textField:'TEXT', panelHeight:'auto'\">";
            string strText = "{0}：<input type='text' name='{1}' id='{1}' />";
            string strDate= "{0}：<input type=\"text\" id=\"{1}\" name=\"{1}\" />";
            DataTable dt = ReportFilterDal.Instance.GetFilterByReportId(rid);
            if (dt.Rows.Count <= 0)
            {
                return "";
            }

            foreach (DataRow r in dt.Rows)
            {
                string strType = r["FieldType"].ToString();
                string strValue = r["FieldValue"].ToString();
                string strName = r["FieldName"].ToString();
                sb.Append("<td>");
                switch (strType)
                {
                    case "T":
                        sb.Append(string.Format(strText, strName, strValue));
                        break;
                    case "S":
                        sb.Append(string.Format(strSelect, strName, strValue));
                        break;
                    case "D":
                        sb.Append(string.Format(strDate, strName, strValue));
                        break;
                }
                sb.Append("</td>");
            }
            sb.Append("<td>");
            sb.Append("<input onclick=\"search()\" type=\"button\" value=\"搜索\" />");
            sb.Append("<input onclick = \"reload()\" type = \"button\" value = \"清空\" />");
            sb.Append("</td>");
            sb.Append("</tr>");
            sb.Append("</table>");
            return sb.ToString();
        }

后端返回的html代碼（包含了文本框，下拉框和時間控件）：

<table><tr><td>編號：<input type='text' name='jjbno' id='jjbno' /></td><td>客戶：<input id = "customer" class="easyui-combobox" name="customer"  data-options="url:'/Business/Common/PharseHandler.ashx?t=customer', method:'get',  valueField:'ID', textField:'TEXT', panelHeight:'auto'"></td><td>開始時間：<input type="text" id="dtStart" name="dtStart" /></td><td>結束時間：<input type="text" id="dtEnd" name="dtEnd" /></td><td><input onclick="search()" type="button" value="搜索" /><input onclick = "reload()" type = "button" value = "清空" /></td></tr></table>

 

前端代碼：

 $.ajax({
                type: "get",
                dataType: "html",
                url: actionUrl,
                data: { action: 'dlistTool', keyWord: rId },
                success: function (data) {
                    if (data) {
                        //console.log(data);
                        $("#toolbar").html(data);
                        $('#dtStart,#dtEnd').datebox({ width: 100 });
                        $.parser.parse("#toolbar")//重新渲染，參數為要渲染的容器
                        $('#SqlContent').hide();
                    }
                    else {
                        $("#toolbar").html('');
                        $('#SqlContent').show();
                        BuildGrid(rId);
                    }


                },
                error: function () {
                    alert("加載數據失敗,請重試！");
                }
            });