学习了几天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定义的写法:
...
columns: [[
{ field: 'balance', title: '余额', width: 100, align: 'right',sortable: true, formatter:formatMoney },
...
HTML直接定义:
< th="" data-options='field: ' balance',width:="" 10="">
0, 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里是取不到上传文件的。
例:< form="" id='ImportForm' runat='server' enctype='multipart/form-data'>
如果用了EasyUI的FileBox,而没用服务器控件,后台就要用Request.Files读取文件列表了,其实就是一个标准的input标签。
三、动态添加内容(JQuery)
想用Panel做个简单的导航菜单,类似于MenuButton的官方Demo,只不过菜单项是由多个按钮组成,由后台根据权限动态生成。但Panel不提供动态添加内容的方法,只有装载远端页面的功能。其实是我不理解Panel的真实用意,它是个可以装任何东西容器,不是只装菜单按钮的ToolBar,当然不提供Add之类的方法了。搜了大半天,终于找到了一篇好文章:《easyui,jquery动态生成menubutton》。原来JQuery已经对所有的对象(除了HTML)封装,提供了append() 、prepend()等一堆的方法,直接拿来用就是了,真是强大啊。
代码示例:
function createMenu(divMenu) {
$.post('getMenu.ashx', null, function (data) {
var menuStr = '';
var subMenuStr = '';
$.each(data, function (i, node) {
menuStr += '< a="" id='MainMenu' +="" i="" +="" ''="" href='#' class='easyui-'>
if (node.menus.length > 0) { //has submenu
menuStr += 'menubutton' data-options='menu:\'#menu' + i+'\''>';
subMenuStr='< div="" id='menu' +="" i="" +="" ''="">';
$.each(node.menus, function (j, o) {
subMenuStr += '< div="">' + o.name + '';
})
subMenuStr += '';
}
else
menuStr += 'linkbutton' data-options='plain:true'>';
menuStr += node.title + '';
menuStr += subMenuStr;
});
$('#' + divMenu).prepend($(menuStr));
for (var i=0;i
$('#MainMenu' + i).menubutton();
}, 'json');
}