jquery easyui 新手怎么开始

1.去官网下一个免费的。

或者百度网盘：链接：https://pan.baidu.com/s/1F7r1w6EVrRHpIoYXLkrloA 密码：0ofj

2.自己创建一个web工程，把下载的easyui文件复制进去。

3.在网页中要使用的话需要

<script type="text/javascript" src="<%=basePath %>easyui/jquery.min.js"></script> <!--这是jQuery文件-->

<script type="text/javascript" src="<%=basePath %>easyui/jquery.easyui.min.js"></script><!--这是jQuery easyUI文件-->
<script type="text/javascript" src="<%=basePath %>easyui/locale/easyui-lang-zh_CN.js"></script><!--这是中文包文件-->
<link rel="stylesheet" type="text/css" href="<%=basePath %>easyui/themes/default/easyui.css"/><!--这是默认主题CSS文件-->
<link rel="stylesheet" type="text/css" href="<%=basePath %>easyui/themes/icon.css"/><!--这是图标CSS文件-->

4.演示一个datagrid。

jsp中写个<div data-options="region:'center'">
<table id="datagrid">  
</table>

</div>

js中写function loadGrid() {
$('#datagrid').datagrid({
iconCls : 'icon-list',
title : '新增客户（加盟商）信息',
url : '',

loadMsg : '数据远程载入中,请等待...',
singleSelect : false,
pagination : true,
nowrap : false,
fit:true,
striped : true,
fitColumns : true,
columns : [[{ 
title : "事务号",
field : 'instId',
width : 70,
sortable : false,
align : 'center',
formatter : function(value, row, index) {
var id = row.instId;
if (id != undefined) {
var linkA = '<a href=javascript:toEvent("'
+ id + '")>' + id + '</a>';
return linkA;
}
}

},  {
field : 'createUser',
title : '申请人',
width : setColumnWidth(0.1),
align : 'center'
}, {
field : 'joiningTraderName',
title : '客户姓名',
width : setColumnWidth(0.08),
align : 'center'
}, {
field : 'state',
title : '事务状态',
width : setColumnWidth(0.07),
align : 'center',
formatter : function(value) {
if (value == 0) {
return "已作废";
}
if (value == 1) {
return "处理中";
}
if (value == 2) {
return "已完成";
}



}
}, {
field : 'mobilePhone',
title : '移动电话',
width : setColumnWidth(0.15),
align : 'center',

}, {
field : 'email',
title : '电子邮件',
width : setColumnWidth(0.2),
align : 'center'
}, {
field : 'contactPeople',
title : '联系人',
width : setColumnWidth(0.1),
align : 'center'
}, {
field : 'contactInformation',
title : '联系方式',
width : setColumnWidth(0.15),
align : 'center'
},

{
field : 'createDate',
title : '申请时间',
width : setColumnWidth(0.13),
align : 'center',

}, {
field : 'cooperationModel',
title : '合作模式',
width : setColumnWidth(0.13),
align : 'center',

}
]],

toolbar : ["-", {
text : '客户（加盟商）新增',
iconCls : 'icon-add',
handler : function() {
addCustomer();
}
},"-"]
});
// 分页控件
var p = $('#datagrid').datagrid('getPager');
$(p).pagination({
pageSize : 10,
pageList : [ 10, 20, 30 ],
beforePageText : '第',
afterPageText : '页    共 {pages} 页',
displayMsg : '当前显示 {from} - {to} 条记录   共 {total} 条记录'
});

}

如果要新增，写个addCustomer();

//跳转客户（加盟商）增加页面.
function addCustomer() {
var WWidth = 1100;
var WLeft = Math.ceil((window.screen.width - WWidth) / 2);
window
.open(
'http://localhost:1010/test/showProduct',
"createJoiningTrader",
"left="
+ WLeft
+ ",top=30"
+ ",width="
+ WWidth
+ ",height="
+ (window.screen.height - 150)
+ ",toolbar=no,rolebar=no,scrollbars=yes,location=no,menubar=no,resizable=yes,titlebar=no");

}

要调用这个js 也要

  <script type="text/javascript" src="<%=basePath %>js/aa.js?ver=1"></script>

写你自己js的位置

不知道有没有什么写漏的，没成功自己看一下前端有没有报错。还没好就留言哦