1.引入js和css文件,分别是:jquery.easyui.min.js
easyui.css icon.css
和jq文件:jquery-1.8.0.min.js
2.想用EasyUI显示数据时,一般使用datagrid(生成表格<table></table>),
datagrid的数据来源用url控制url:'/Admin/Index1'
传入数据格式必须是json串,根据需求的不同, 改变data-options中属性和属性值,
我可以举几个简单的例子
分页时:pagination:true
多选时:singleSelect:false(默认)
这样很简单就实现数据显示了
3.在查询时用在data-options中添加tools:”#t”在table中放入一个id为t的div容器
并用以下方式传到url中的路径中,判断并查询
$('#dg').datagrid('load',{
BEGIN_DATE:$('#start').datebox('getValue'),
END_DATE:$("#end").datebox('getValue'),
NAME:$("#myname").val()
})
4. easyui-validatebox在使用时默认日期格式是:mm/dd/yy
如果需要更改日期格式参数名必须是dateFormat
如下:
$(document).ready(function(){
$("#picker").datepicker({dateFormat:'yy-mm-dd'}); });
-------
以上就可以实现显示和查询
5. . jq EasyUI中主要使用的:
window 生成一个window窗口。
.tree 生成一个树形结构。
.datagrid 生成一个表格。
.combobox 生成一个组合下拉框。
.combotree 生成一个组合树形框。
.dialog生成一个对话框。它继承自window
6.在显示页面的基础上:弹出遮罩层
Window可以实现
<div id="add" class="easyui-window" title="用户操作" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:350px;height:300px;padding:10px;">
</div>
将表单放入以上这样的容器中用
$('# add).window('open')
$('# add).window(close)
控制显示隐藏
7.
用var row = $("#dg").datagrid("getSelected");
获取选中行的对象
用$('#dg').datagrid('load');刷新当前的datagrid
通过以上的七点可以简单的使用jq EasyUI。