动态创建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("加载数据失败,请重试！");
                }
            });