EasyUI学习心得

因为要修改十几年前的一个项目界面,打9月份开始学习EasyUI,很多事情都要自己试过才知道,小问题会浪费很多时间。所以,就在此记录一下,随时更新。

一、引号

EasyUI的自定义关键字的识别,API文档语焉不详。摸了很久才明白。

基本规律就是:

1. 在HTML中直接定义时,大部分必须加引号,包括自定义函数名。但布尔值、数字例外。

2. 在js中给出定义时,只有字符串类型的需要加引号,仅供EasyUI识别的字符串类型的关键字也要加引号,比如“center”。

例1:

<input class="easyui-combobox" ID="ddlAccount"
    data-options="
    valueField:‘Key‘,
    textField:‘Value‘,
    panelHeight : ‘auto‘,
    editable:false,
    required:true
“/>

这里的“auto”是EasyUI特有的,必须加引号。但布尔值true一定不能加引号,但很多网上搜到的语句就加了引号。

例2. 函数名。

假定有以下函数:

function formatMoney(value, row, index) {
            return (value.toFixed(2));
}

则用JS定义的写法为(以DataGrid的列定义为例):

...
columns: [[
    { field: ‘balance‘, title: ‘余额‘, width: 100, align: ‘right‘, sortable: true, formatter:formatMoney },
...

而HTML直接定义的写法为:

<th data-options="field: ‘balance‘,width: 100, align: ‘right‘, sortable: true, formatter:formatMoney">余额</th>

这里自定义的formatMoney函数就绝对不能加引号!我花了半天时间才明白,这是我学艺不精, EasyUI的例子里写得很明白。

如果用老版本的EasyUI(大概1.3以前),没有data-options属性,则在HTML中定义的属性大部分必须加引号。如:formatter="formatMoney"。

二、JQuery AJAX 的后台

1. Session变量

后台的实现很简单,最常见的就是使用ashx。但如果要在后台处理程序中使用到Session变量,则必须继承System.Web.SessionState.IRequiresSessionState接口。

例:

public class MenuHandler : IHttpHandler, System.Web.SessionState.IRequiresSessionState

因为菜单往往与用户权限关联,用户信息一般是在登录成功后放入Session变量中的,所以动态生成菜单时,必须要读取Session变量。这时候就必须继承(系统自动实现)IRequiresSessionState接口。

2. 文件上传

Form里别忘了加"multipart/form-data"!否则后台Request.Files里是取不到上传文件的。如果用了EasyUI的FileBox,而没用服务器控件,后台就要用Request.Files读取文件列表了,其实就是一个标准的input标签。

例:

<form id="ImportForm" runat="server" enctype="multipart/form-data" >

三、动态添加内容(JQuery)

想用Panel做个简单的导航菜单,类似于MenuButton的官方Demo,只不过菜单项是由多个按钮组成,由后台根据权限动态生成。但Panel不提供动态添加内容的方法,只有装载远端页面的功能。其实是我不理解Panel的真实用意,它是个可以装任何东西容器,不是只装菜单按钮的ToolBar,当然不提供Add之类的方法了。搜了大半天,终于找到了一篇好文章:《easyui,jquery动态生成menubutton》。原来JQuery已经对所有的对象(除了HTML)封装,提供了 append() 、prepend()等一堆的方法,直接拿来用就是了,真是强大啊。

代码示例:

 1 function createMenu(divMenu) {
 2     $.post(‘getMenu.ashx‘, null, function (data) {
 3         var menuStr = ‘‘;
 4         var subMenuStr = ‘‘;
 5         $.each(data, function (i, node) {
 6             menuStr += ‘< a id="MainMenu‘ + i + ‘" href="#" class="easyui-‘;
 7             if (node.menus.length > 0) {    //has submenu
 8                 menuStr += ‘menubutton" data-options="menu:\‘#menu‘ + i +‘\‘">‘;
 9                 subMenuStr=‘< div id="menu‘+ i + ‘">‘;
10                 $.each(node.menus, function (j, o) {
11                     subMenuStr += ‘< div >‘ + o.name + ‘</ div>‘;
12                 })
13                 subMenuStr += ‘</ div>‘;
14             }
15             else
16                 menuStr += ‘linkbutton" data-options="plain:true">‘;
17             menuStr += node.title + ‘</ a>‘;
18             menuStr += subMenuStr;
19         });
20         $(‘#‘ + divMenu).prepend($(menuStr));
21         for (var i=0;i
22             $(‘#MainMenu‘ + i).menubutton();
23     }, "json");
24 }
时间: 2024-11-07 18:18:08

EasyUI学习心得的相关文章

运维管理平台实现与学习心得

经过一段时间的学习,写了一个简单的运维管理平台小项目,先看看啥样吧! 下面说明下具体实现: 软件架构:HTML+CSS+Jquery+Bootstrap+Ajax+Python2.7+Django1.9+SaltStack+MySQL 功能描述: 数据可视化:采用百度开源的ECharts绘图,通过Python脚本每分钟统计Nginx日志分析PV/UV量写到数据库. 资产管理:采用SaltStack Restful API二次封装调用收集主机配置信息入库,并提供增删改查. 主机批量管理:也是调用S

Linux系统理解以及Linux系统学习心得

原创作品转载请注明出处  <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 作者:严哲璟 说一下我对Linux系统的理解 1.加载Linux内核准备:在加载基本输入输出模块(BIOS)之后,从磁盘的引导扇区读入操作系统的代码文件块到内存中,之后开始整个系统的初始化. 2.main.c的start_kernel函数是整个操作系统的入口,这也与Linux是基于C语言的特性相符,start_kernel具体做的动作很多

我的MYSQL学习心得(八)

我的MYSQL学习心得(八) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYSQL学习心得(五) 我的MYSQL学习心得(六) 我的MYSQL学习心得(七) 这一篇<我的MYSQL学习心得(七)>将会讲解MYSQL的插入.更新和删除语句 同样的,只会讲解跟SQLSERVER不同的地方 插入 将多行查询结果插入到表中 语法 INSERT INTO table_name1(column_list1) SELECT (

我的MYSQL学习心得(一)

我的MYSQL学习心得(一) 使用MYSQL有一段时间了,由于公司使用SQLSERVER和MYSQL,而且服务器数量和数据库数量都比较多 管理起来比较吃力,在学习MYSQL期间我一直跟SQLSERVER进行对比 第一期主要是学习MYSQL的基本语法,陆续还有第二.第三.第四期,大家敬请期待o(∩_∩)o 语法的差异 我这里主要说语法的不同 1.默认约束 区别:mysql里面DEFAULT关键字后面是不用加括号的 --sqlserver CREATE TABLE emp ( id INT DEFA

在马哥linux运维学院学习心得

题目:在马哥linux运维学院学习心得 姓名:谭龙 班级:M18 学号:26 时间:2016-02-29--2016-06-02(正常毕业时间预计在7月中上旬)   正文: 个人基本情况: 我是一名在校的即将毕业的大四学生,毕业时间为2016.7.专业为矿物加工工程专业,纯正的四川-广安人(邓小平故居就在那).因找不到工作,加上自己也不知道干什么,在堂弟的推荐下,来参加了马哥linux运维学院的学习:怀揣着一颗对计算机懵懂的心,开始涉足从未接触过了linux. 个人收获与心理变化: 在一开始接触

第一篇大数据学习心得

之前未习惯发布学习心德博文,后续会采用这种方式发布学习心得,希望能够很好的督促自己. 计划会按scala,Hadoop,Spark的顺序去学习. 刚学scala的时候,眼前一亮,这语法跟python,java很像啊,刚好两者很熟悉,偷笑,后面果然学的得心应手.今天就不发表具体的技术内容.反正王学林老师的视屏讲解很好,声音非常富有感染力,想开小差都比较难,呵呵,话语精炼,个人较喜欢的风格,这里说下这段时间学习scala的小心得?,视频学完一章紧接着进行敲代码,调试,最后记笔记,对,记笔记,不一定是

spring核心知识(学习心得)

直接进入主题,主要分为两大部分:框架学习心得和spring框架的核心知识. 学习心得 1.学习框架的时候,一定要弄清楚的几个问题: a. 这是一个什么框架 轻量级还是重量级, 侵入式还是非侵入式,是解决单个问题还是整体的解决方案. b. 框架的设计理念是什么(为了解决什么问题而出现) c. 框架的优缺点 d. 框架的架构是怎样的 e. 框架的核心是什么 f. 框架能实现哪些功能 在学习一个框架的时候如果都不知道它能够提供哪些功能,就更加不用谈功能实现和充分利用框架了 2. 在学习多个框架以后,如

C++用法的学习心得

c++这门课,在我刚进入大学的就已经开始接触了.因为自己的专业就是计算机科学,因此c++嘛,对于我来说还是比较重要的.不同于其他专业,一开始我接触就是c++了,跳过了c语言一类的课.就我自己认为,c++这课学起来还是很有难度的.大一上课的时候,老师就说过这课在生活中的应用很广泛.处于初学者的我,开始给我的感觉就是很是乏味枯燥,提不起兴趣.不过仔细想想自己的专业就是和它有关,就算将来自己不从事这个行业,还是很有学习它的必要.因为多一门技术总归是不会吃亏的. 作为男生嘛,自己没有少玩游戏.很多人玩游

Android学习心得(16) --- Dex文件结构实例解析(2)

我在博客上发表一些我的Android学习心得,希望对大家能有帮助. 这一篇我们讲述一下通过一个实例来分析dex文件结构和组成. 参考Leb128数据类型 Android学习心得(5) --- dex数据类型LEB128 参考实例分析学习理解dex文件结构Android学习心得(15) --- Dex文件结构解析(1) 参考baksmali工具使用Android学习心得(4) --- MAC下smali文件编写与运行 1.编译 我们通过一个例子来分析dex文件的构成 创建一个Hello.java文