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("加载数据失败,请重试!");
                    }
                });
  • 相关阅读:
    洛谷P1057 传球游戏
    洛谷 CF937A Olympiad
    洛谷P4057 晨跑
    New blog
    DHTMLX系列组件的学习笔记
    javascript学习笔记
    typeof 使用介绍
    tomcat启动后ids页面无法访问
    快捷键accesskey
    jquery回调函数callback的使用
  • 原文地址:https://www.cnblogs.com/jingsha/p/5714145.html
Copyright © 2011-2022 走看看