因为要修改十几年前的一个项目界面,打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 }