zoukankan      html  css  js  c++  java
  • EasyUI----动态拼接EasyUI控件

    近期在做的项目中。依据查询到的数据,然后动态的拼接easyUI的控件显示到界面上。

    在数据库中,有一个命令的表,另一个參数的表,先到命令的表中去查询这一个设备有哪些命令,比方说。摄像头有一个转动的命令,那么就要把转动这个命令动态的拼接成EasyUI的Buttonbutton。然后依据命令去查询这个命令下的參数,比方说,转动是有角度的,10°,20°……。这个度就是命令下的參数,然后动态的拼接成text或者combobox的样式。

    以下就把代码展示一下,B层和D层都是简单的查询。返回的是DataTable,然后我在B层加了一个转换的类,将DataTable中的数据转换成前台要显示的Json串。

     #region GetDeviceFuncParJson 动态拼接设备控制下的命令和參数
            ''' <summary>'''
            ''' 动态拼接设备控制下的命令和參数'''
            ''' </summary>'''
            ''' <param name="dt">传入的表</param>'''
            ''' <returns>json串</returns>'''
            public static string GetDeviceFuncParJson(DataTable dt)
            {
    
                '''定义两个空的字符串类型'''
                string stringJson = "";  //</div>
                //string total = "";
                foreach (DataRow dsFunc in dt.Rows)
                {
                    stringJson += "<div style="">";
                    '''获取命令ID'''
                    string stringFuncId = dsFunc["function_id"].ToString();
                    '''拼接命令參数'''
                    StateEventFunctionBLL stateEventFunctionBLL = new StateEventFunctionBLL();
                    '''调用查询方法,返回參数值'''
                    DataTable dtParms = stateEventFunctionBLL.GetDeviceFunctionParams(int.Parse(stringFuncId));
    
                    '''TODO:加推断,命令是否有參数。有參数的放左边,没有參数的放右边'''
                    if (dtParms.Rows.Count>=1)
                    {
                        foreach (DataRow dsParms in dtParms.Rows)
                        {
                            '''拼接名称text文本框'''
                            stringJson += "<br><input id="" class="easyui-validatebox textbox" value="" + dsParms["par_name"].ToString() + "" disabled="disabled" style="height: 20px; margin-left:10px;"/>";
                            '''拼接默认值combobox下拉框'''
                            stringJson += "<select id="" value="" class="easyui-combobox" style="margin-left:10px; 130px;" name="dept" data-options=""><option value="1">" + dsParms["par_default_value"].ToString() + "</option></select>";
                        }
                        '''假设最后多一个“,”的话,就把它删掉'''
                        if (stringJson.ToString().EndsWith("<br>"))
                        {
                            stringJson.Remove(stringJson.Length - 1, 1);
                        }
                    }               
    
                    string strChinese = dsFunc["function_name"].ToString();
                    string strChiToAllSpell = ChineseToSpellBLL.ConvertToAllSpell(strChinese);
                    '''拼接成命令button'''
                    stringJson += "<a id="" + strChiToAllSpell + "" style="margin-left:40px" href="javascript:void(0)" class="easyui-linkbutton">" + dsFunc["function_name"].ToString() + "</a></div>";
    
                }
                '''返回拼接好的參数和命令的样式'''
                return stringJson;
    
    
            }
            #endregion

    动态载入的界面例如以下:
    这里写图片描写叙述

    动态拼接的方法,一開始的时候,感觉非常难,挺复杂的,事实上一步一步的去研究后你会发现,没有那么的难,学会了你就会发现。拼接的原理是相似的,再让你去拼接其它的控件或者要用到的东西的时候,就会非常快的把它做出来!

  • 相关阅读:
    7.31 "简单"(大嘘)DP
    P2014 选课
    7.30 "简单"(大嘘)DP
    Codeforce 1131C Birthday (构造数组)
    洛谷 P1074【靶形数独】(DFS)
    NOIP2004【虫食算】(DFS)
    洛谷 P1025【数的划分】(DFS dp)
    洛谷P1019【单词接龙】(DFS)
    洛谷P1162【机器人搬重物】(BFS)
    洛谷P1141【01迷宫】
  • 原文地址:https://www.cnblogs.com/jhcelue/p/7084723.html
Copyright © 2011-2022 走看看