zoukankan      html  css  js  c++  java
  • 动态创建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({  100 });
                            $.parser.parse("#toolbar")//重新渲染,参数为要渲染的容器
                            $('#SqlContent').hide();
                        }
                        else {
                            $("#toolbar").html('');
                            $('#SqlContent').show();
                            BuildGrid(rId);
                        }
    
    
                    },
                    error: function () {
                        alert("加载数据失败,请重试!");
                    }
                });
  • 相关阅读:
    SGU 176.Flow construction (有上下界的最大流)
    POJ 2391.Ombrophobic Bovines (最大流)
    poj 1087.A Plug for UNIX (最大流)
    poj 1273.PIG (最大流)
    POJ 2112.Optimal Milking (最大流)
    SGU 196.Matrix Multiplication
    SGU 195. New Year Bonus Grant
    关于multicycle path
    ppt做gif动图
    codeforces 598A Tricky Sum
  • 原文地址:https://www.cnblogs.com/jingsha/p/5714145.html
Copyright © 2011-2022 走看看