JqUI简单用

作者在 2013-11-29 10:01:07 发布以下内容
              刚用jq  EasyUI+mvc做了一个权限模块,对于jq  EasyUI有了一定得认识,对于jq  EasyUI的主要部分总结了以下的基本用法:

1.引入jscss文件,分别是: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中放入一个idtdiv容器

 并用以下方式传到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

默认分类 | 阅读 4085 次
文章评论,共0条
游客请输入验证码
文章归档
最新评论