（札记）EasyUI 基本使用方法

最新推荐文章于 2022-05-08 10:13:54 发布

_叔

最新推荐文章于 2022-05-08 10:13:54 发布

阅读量2.8k

点赞数

分类专栏： jQuery & EasyUI 文章标签： easyui

本文链接：https://blog.csdn.net/wzs298/article/details/42236189

版权

jQuery & EasyUI 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先说明：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 : 330 px ; height : 250 px "

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');

_叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
（札记）EasyUI 基本使用方法

先说明：EasyUI是基于jQuery框架来封装的，离开jQuery的话，EasyUI就玩不转了。而jQuery最核心的功能就是选择器！EasyUI中，相关方法的使用：例子$('#cc').layout('collapse','north');//折叠north面板格式使用jq获取相关
复制链接

扫一扫