（札记）EasyUI 基本使用方法

最新推荐文章于 2024-05-27 12:07:42 发布

原创最新推荐文章于 2024-05-27 12:07:42 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#easyui

jQuery & EasyUI 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用EasyUI和jQuery进行网页开发，包括组件方法、属性及事件的应用实例。通过具体示例展示了EasyUI中datagrid组件的配置和使用方法。

先说明：EasyUI是基于jQuery框架来封装的，离开jQuery的话，EasyUI就玩不转了。

而jQuery最核心的功能就是选择器！

EasyUI中，相关方法的使用：

例子	$('#cc').layout('collapse','north');//折叠north面板
格式	使用jq获取相关id.要控制的组件('方法','参数');

EasyUI中，相关属性和事件的使用：

例子 格式
var datagrid = $('#datagrid').datagrid({
url:"testCm!listTest.action",
idField:'row',//多选时，通过row记录行号
toolbar:"#toolbar",//工具栏调用
loadMsg:'正在加载数据..',
//双击事件
'onDblClickRow':function (Index, row){
editUser();
}
});

使用jq获取相关id.要控制的组件名({
 
     属性名：参数,
      '事件名'：function(参数){
             //相关操作
       }
})

在配置相关方法或者属性时，要注意区分该方法是属于html、css、js、jq、easyui中的哪种？

例子

说明

var datagrid = $('#datagrid').datagrid({
url:"testCm!listTest.action",//标号1
fit:true,//自动填充满
border:false,//去除边框
pagination:true,//分页栏
pageSize:20,//默认选择项
pageList:[10,20,50,100],//下拉框数值
rownumbers:true,//是否显示行号
fitColumns:false,//是否让浏览器自动控制列宽
singleSelect:false,//是否单选
idField:'row',//多选时，通过row记录行号
toolbar:"#toolbar",//工具栏调用
loadMsg:'正在加载数据..',
//列模型
columns:[[
{field:'row',checkbox:true},
{field:'id',title:'ID',width:180,align:'center'},
{field:'passtime',title:'Passtime',width:130,align:'center',sortable:true,
formatter:function(value,rowData,rowIndex){//标号2
var Timestamp = new Date(value).toLocaleDateString();//标号3

//将时间格式转换成本地格式
return Timestamp;
}
},
{field:'cpys',title:'cpys',width:80,align:'center'},
{field:'cphm',title:'cphm',width:80,align:'center'},
{field:'csys',title:'csys',width:80,align:'center'},
{field:'ckFlag',title:'ckFlag',width:80,align:'center',
formatter:function(value){
if(value) return "<font color='green'>通过</font>";//标号4

//格式化内容，true->通过，false->禁止，并配上颜色
else return "<font color='red'>禁止</font>";
}}
]],
//双击事件
'onDblClickRow':function (Index, row){//标号5
editUser();
}
});

例2：

<div id="win" class="easyui-dialog"style="width:330px;height:250px"

data-options="iconCls:'icon-save',modal:true,buttons:[{
text:'保存',
handler:function(){saveUser();}
},{
text:'关闭',
handler:function(){closeUser();}
}]" >

</div>

$('#win').window('close');//标号6

//标号1

此处的url这些属性是属于datagrid本身的属性

//标号2

此处的formatter、firld这些属性属于列模式的

//标号3

new Date()和toLocaleDateString()是属于javascript的方法

//标号4

<font>是属于html的标签

color=''是属于css的样式

//标号5

'onDblClickRow'是属于datagrid的方法

//标号6

比如在<body>中创建了一个dialog面板，

在

<script type="text/javascript">

中使用window的组件来控制dialog面板是可以的。

原因是因为dialog面板依赖于window的面板，所以

$('#win').window('close');
这句语句还可以写成

$('#win').dialog('close');