使用easyui时间很长了,直到现在才想起来该好好的总结总结了,也是因为现在有了IE10,才感觉这个框架速度上可以接受了,以前版本的IE上使用easyui的datagrid表格控件,速度真是不敢恭维,以下说一点点使用经验,一边总结一边写啦:
1、datagrid:不少人使用的时候应该都遇到了表头和内容错位的问题,此时,需检查一下,使用sql语句查询出来的字段不能少于表头字段,查询出来的字段名和datagrid中定义的field名要一致,如果前两项都检查完之后还是不能对齐,那么尝试在datagrid的data-options中定义下字段宽度,应该就能解决这个问题了,我猜测要设定宽度的原因是有的字段是空值就会造成这个格被挤了,设置上固定宽度后就不会被挤了
2、datagtid:datagrid的标题栏上经常需要用到一些按钮,combo,text等等这些控件,所以如果是单单的按钮的话,在data-options属性中的toolbar下面直接写就行
举个例子:
<table Class="easyui-datagrid" data-options="toolbar:[ { text:'刷新' //标题
iconCls:'icon-reload' //图标
handler:function(){ ReloadTable();} //处理方法
},
, ‘-’ //分隔符
{........... //内容格式同上面标红色字体的一样,模仿着写就行 } ]">
<thead>
<tr>
<th data-options="field:'测试1' ">测试1</th>
<th data-options="field:'测试2' ">测试2</th>
</tr>
</thead>
</table>
如果包含combobox,text,button等等,则可以先把这些控件写在一个DIV里面,然后再赋给toolbar就可以了
举个例子:
<table Class="easyui-datagrid" data-options="toolbar:'ToolDiv' ">
<thead>
<tr>
<th data-options="field:'测试1' ">测试1</th>
<th data-options="field:'测试2' ">测试2</th>
</tr>
</thead>
</table>
<div id="ToolDiv" style="height:auto">
数字格式表格:<input type="text" id="num" name="num" class="easyui-numberbox" style="width:50px;">
下拉选框:<select id="com" name="dept" style="width:200px;">
<option>1</option>
<option>2</option>
</select>
按钮:<a href="#" class="easyui-linkbutton" iconCls="icon-reload" plain="true" OnClick=" ">链接按钮</a>
</div>