Easyui使用中遇到的问题和注意事项

简言

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

中文网站http://www.jeasyui.net/

英文官网http://www.jeasyui.com/

使用中注意事项

NO:1 easyui的textbox和validatebox的 赋值区别

textbox：$('userId').textbox('setValue','aaa');
validatebox :$('userId').val('aaa');

尤其要注意textbox和我们在jquery中赋值的方式不一样，另外通过调试发现对于我们的

<input name="memberName" class="easyui-textbox"  missingMessage="会员姓名必填" >

文本框easyui会隐藏掉，我们实际看到的是easyui处理过的。所以要用easyui的方式去赋值。

上面黄底代码中在浏览器调试中对应下面红框中的内容，但是我们发现是style=”display:none;”的，而蓝色框中才是经过easyui处理后真正显示出来的文本框。

NO:2 $(‘#memberBusList’).datagrid(‘getSelected’)注意事项

获取的是从后台传递过来的list中一个对象的所有数据，跟展示不展示没有关系，即跟下面有没有这个列没有关系

columns : [ [
{
field : 'memberName',
title : '会员名称',
sortable : false,
align : 'center',
width : '300'
}
] ]

NO:3 datagrid和pagination中设置下面两个属性的区别

pageNumber:1,

pageSize : 10,//每页显示的记录条数，默认为10

pageList : [ 5, 10, 15, 20 ],//可以设置每页记录条数的列表

官方文档地址http://www.jeasyui.com/documentation/index.php

datagrid的描述



pagination的描述



通过比较我们发现，在datagrid中设置以上三个属性的时候也会将这三个属性设置进pagination中，并且在列表初始化的时候也会读取datagrid中的这三个参数。而如果只在pagination中设置这三个属性就会导致第一次进页面的时候一直都是默认的查询10条数据。

NO：4 帷幕问题

弹框对应的div加data-options=”modal:true”代码和效果图如下

<div id="dlgdetail" class="easyui-dialog" data-options="modal:true">

NO：5 列表自适应高

在列表的地方加上fit=”true”属性，不加列表下面的分页是紧挨着列表的最后一条数据的

<table id="memberList" fit="true">  </table>

持续更新中…欢迎大家指导