EasyUI学习心得

时间：2014-12-16 14:51:23 阅读：328 评论：0 收藏：0 [点我收藏+]

标签：style blog http ar io color os 使用 sp

因为要修改十几年前的一个项目界面，打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直接定义的写法为：

这里自定义的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 }

EasyUI学习心得

标签：style blog http ar io color os 使用 sp

原文地址：http://www.cnblogs.com/popapa/p/EasyUI.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行