EasyUI的学习

 

 

1.引入jquery，easyui的jquery

<script type="text/javascript">
$(document).ready(function () {
LoadApp();
var p = $('#dg').datagrid('getPager');
$(p).pagination({
pageSize: 10, //每页显示的记录条数，默认为10
pageList: [5, 10, 15], //可以设置每页记录条数的列表
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
onBeforeRefresh: function () {
$(this).pagination('loading');
alert('before refresh');
$(this).pagination('loaded');
}
});

$("#dg").datagrid({
method: 'get'
});

$('#dg').datagrid({
toolbar: '#tb',
url: '/myapimgr.aspx?action=loadjsondata',
title: 'Load Data',
columns: [[{
field: 'id',
width: '300',
checkbox: true
}, {
field: 'app',
title: 'AppName',
width: '100',
align: 'center'
}, {
field: 'action',
title: 'Action',
width: '300',
align: 'center'
}]],
idField: 'id',

pageSize: 10,
rownumbers: true,
singleSelect: true,
loadMsg: 'Processing, please wait …',
pagination: true
});
});

</script>

2.Form里面的内容

a.主要ui的table

<table id="dg" class="easyui-datagrid" style="width:800px;height:500px">
</table>

b.头部按钮，注意class

<div style="margin-bottom:5px">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">add</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">edit</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="removeUser()">delete</a>
</div>

 

c.弹出框的div

<div id="dlgAdd" class="easyui-dialog" style="width:700px;height:auto;padding:5px 5px"
closed="true" buttons="#dlg-buttonsAdd">

</div>