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; width: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

动态载入的界面例如以下:

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

时间: 2024-11-01 15:19:21

EasyUI----动态拼接EasyUI控件的相关文章

给easyui datebox时间框控件扩展一个清空的实例

给easyui datebox扩展一个清空的实例 步骤一:拓展插件 /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; (function ($) { var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { text: function (target) { return $(target).datebox("o

easyui中tree型控件不正常显示的处理方法

我在使用easyui中的tree控件时,出现不正常显示的现象,比如li中不能使用自定义的图标.父级展开或关闭时,其子级仍然显现并出现重叠等.找了很多资料,都没解决这个问题,后来逐个对照官方的源码,才发现是easyui.css和icon.css的引用顺序引起的. 正确的引用顺序是先引用easyui.css,然后引用icon.css. 不知这是否是easyui的Bug?

关于easyui中数据型控件使用的一些总结

easyui是个非常棒的jquery插件,不管从性能到美观,兼容性上都比较屌,一般的数据控件(如datagrid,tabs,tree)操作时最好将初始化和数据绑定分开做.先想想为什么? 我们先来谈谈坏处是什么: 1.前台最常见的就是增删改查操作,试想下如果初始化和绑定数据一起操作岂不是初始化重复了. 2.像tabs这种切换控件一般里面还要嵌套其他数据型控件,每次切换都要初始化嵌套的控件,效率低更重要的是消耗不必要的浏览器内存. ps:我做过一个实时刷新的项目,tabs内嵌套datagrid,在实

WinForm用户控件、动态创建添加控件、timer控件--2016年12月12日

好文要顶 关注我 收藏该文 徐淳 关注 - 1 粉丝 - 3 0 0 用户控件: 通过布局将多个控件整合为一个控件,根据自己的需要进行修改,可对用户控件内的所有控件及控件属性进行修改使用 动态创建添加控件: 1 //定义控件类型 2 Button btn = new Button(); 3 //控件名称……等属性,也可以直接绑定各种事件 4 btn.Name = "mybutton" + i.ToString(); 5 //添加到窗体 this 可以替换为 容器控件 6 this.Co

winform用户控件、动态创建添加控件、timer控件、控件联动

用户控件:(1) 相当于自定义的一个panel 里面可以放各种其他控件,并可以在后台一下调用整个此自定义控件. 使用方法:在项目上右键.添加.用户控件,之后用户控件的编辑与普通容器控件类似.如果要在后台往窗体中添加, 将其实例化,然后添加到想要添加的容器的Control集合中. 动态创建添加控件: 配合上面的用户控件,实现类似QQ界面的打开自动加载好友昵称和签名 public Form1() { InitializeComponent(); //将当前登陆的账号的全部好友信息取出来 List<A

asp.net动态增加服务器端控件并提交表单

为什么要用原生的呢? 1.目的 原生出现浏览器兼容性问题 极少,不用测试多浏览兼容性 .需要考虑到市面上的其他垃圾浏览器. 2.性能不好 如果不考虑第一条 你可以换一种方式 直接上代码 .aspx页面 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-

C# WinForm动态添加MSChart控件

添加mschart.dll动态链接库 添加引用 System.Windows.Forms.DataVisualization MSChart控件作为方便的用户数据展示控件,可以方便的使用控件提供的形状和展示形式展示数据,早Web应用中用的比较多,这几天一直在做一个基于Winform的CS结构的演示程序,用到了MSChart,由于一直也不太熟悉MSChart,又是动态自定义添加,所以一点一点的摸索着做起来,动态添加自定义的MSChart到WinForm程序中,上代码: 1.创建一条曲线形式的Cha

解决tableView中cell动态加载控件的重用问题

tableView的cell,有时候需要在运行时取得对应的数据后才能够动态的创建该cell中的控件并加载到该cell中,此时,你一定会遇到重用问题,即使你能做到该cell只根据数值加载了一回控件,你也没法保证不出现重用问题:) 效果(请注意查看,移动下面的格子时,上面出现了重用的问题) 源码: YXCell.h // // YXCell.h // YXTableView // // Copyright (c) 2014年 Y.X. All rights reserved. // #import

Android动态布局,并动态为TextView控件设置drawableLeft、drawableRight等属性添加图标

注:(图中每一个条目和图标都是由代码动态生成) 代码动态布局,并需要为每一个条目设置图标,此时用到了 android:drawableLeft="@drawable/icon"  父xml文件: [html] view plaincopyprint? <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.andr

未能加载视图状态。正在向其中加载视图状态的控件树必须与前一请求期间用于保存视图状态的控件树相匹配。例如,当以动态方式添加控件时,在回发期间添加的控件必须与在初始请求期间添加的控件的类型和位置相匹配

信息: 未能加载视图状态.正在向其中加载视图状态的控件树必须与前一请求期间用于保存视图状态的控件树相匹配.例如,当以动态方式添加控件时,在回发期间添加的控件必须与在初始请求期间添加的控件的类型和位置相匹配. 数据源: System.Web 堆栈信息: 在 System.Web.UI.Control.LoadViewStateRecursive(Object savedState) 在 System.Web.UI.Control.LoadChildViewStateByIndex(ArrayLis