easyui是一个前台框架，基于jquery界面插件的集合，他可很方便的创建前台的界面，只需要通过编写一些简单HTML标记，就可以定义用户界面。可以在jquery和h5上使用
在初次使用easyui进行开发之前，首先需要做的事是导入easyui所需的相关jar包css样式等，还需要准备一个easyui的api供查看学习
在使用easyui时，首先要了解的是DataGrid，也就是数据表格，他可以创建一个表格或表单，首先我们需要在页面定义一个table的id，然后在js页面就可以直接的去调用使用
<div fit=true style="width:100%; height:100%">
<div>
<!-- 创建table表格 -->
<table id="userTable"></table>
</div>
</div> 然后通过书写js代码构建表格的框架
在datagrid这个大框架下，首先是他的各种类型的属性名，可以设置请求地址，列的高度宽度等属性，还有用于构建表格的列行这些
frozenColumns属性:这里定义的是固定在左侧的列，用于checkbox的勾选等
columns属性:用于easyui的各列的配置对象
toolbar属性：用于表格顶部的工具栏，一般会有新增修改删除这些
$(function(){
var flag;//判断新增和修改
var updateid;//编辑的Id
$('#userTable').datagrid({
url:'login/agentLists.action', //请求地址
width:'auto', //列的宽度
height:658, //列的高度
striped: true, //是否显示斑马线效果
fitColumns:'true', //真正的自动展开/收缩列的大小
loadMsg: "数据加载中，请稍后……",
pageSize: 5,//每页显示的记录条数，默认为10 ，后台接收默认为rows
pageList: [5,10,15],//可以设置每页记录条数的列表
pagination:true,//显示分页工具栏
frozenColumns:[[ //同列属性，但是此列会被冻结在左侧
{
field:'ck', //列字段名称
title:'全选',//列标题文本
width:10, //列宽度
checkbox:true //是否是多选
},
]],
columns:[[ //列配置对象
{
field:'agentName',
title:'代理商名称',
width:10,
align:'center' //对齐方式
},{
field:'userName',
title:'代理商帐号',
width:10,
align:'center'
},{
field:'area',
title:'代理商所在地区',
width:10,
align:'center'
},{
field:'team',
title:'代理商团队名',
width:10,
align:'center'
},{
field:'pic',
title:'代理商负责人',
width:10,
align:'center'
}
]],
toolbar: [ //顶部工具栏的DataGrid面板
{
text:'新增', //文本名称
iconCls: 'icon-add', //增加图标
handler:function(){ //点击按钮时触发一个事件
}
},'-',{
text:'编辑',
iconCls: 'icon-edit', //跟新操作
handler:function(){ //点击时触发
}
},'-',{
text:'删除',
iconCls: 'icon-remove',
handler: function(){
});
}
}
}
]
})
})toolbar: [ //顶部工具栏的DataGrid面板
{
text:'新增', //文本名称
iconCls: 'icon-add', //增加图标
handler:function(){ //点击按钮时触发一个事件
flag='add';
$('#userDialog').dialog({ //打开新增框
title:'新增代理商' //名称
});
//重置
$('#userForm').form('clear');
$("#userForm").get(0).reset();
$("#userDialog").dialog('open');
}
},'-',{
text:'编辑',
iconCls: 'icon-edit', //跟新操作
handler:function(){ //点击时触发
flag ='update';
var arr=$("#userTable").datagrid('getSelections'); //返回所有被选中的行,没有记录的时候返回空数组
if(arr.length!=1){ //如果选中的不是一行
$.messager.show({
title:'提示',
msg:'请至少选择一行进行编辑'
});
}else{
updateid=arr[0].agentId;
$('#userDialogs').dialog({ //弹出对话框
title:'代理商修改'
});
//打开窗口
$('#userDialogs').dialog('open');
//重置
$('#userForms').get(0).reset();
$('#userForms').form('load',{ //读取字符串填充到表单当中
agentNames:arr[0].agentName,
areas:arr[0].area,
teams:arr[0].team,
pics:arr[0].pic,
});
}
}
}
]通过js代码调用同一个页面下的新增修改代码
<div id="userDialog" class="easyui-dialog" closed="true" style="width:620px;top:150;" data-options="iconCls:'icon-save',resizable:true,modal:true">
<fieldset class="tableStyle">
<form id="userForm" method="post">
<table class="tableStyle" style="width: 100%;height:96%; font-size: 14px"height="100px">
<tr class="tableStyle" height="40px" >
<td width="15%" class="tableStyle">代理商名称：</td>
<td>
<input id="agentName" name="agentName" class="easyui-textbox" style="width: 150px" required="true" missingMessage="该项为必填!">
</td>
<td width="15%" class="tableStyle">代理商帐号：</td>
<td>
<input id="userName" name="userName" style="width: 150px" οnkeyup="value=value.replace(/[^\w]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\w]/g,''))" required="true" missingMessage="该项为必填!">
</td>
</tr>
<tr class="tableStyle" height="40px" >
<td width="15%" class="tableStyle">登录密码：</td>
<td>
<input id="passWd" type="password" name="passWd" class="easyui-textbox" style="width: 150px" required="true" missingMessage="该项为必填!">
</td>
<td width="15%" class="tableStyle" height="40px">所在地区：</td>
<td>
<input id="area" name="area" class="easyui-textbox" style="width: 150px" required="true" missingMessage="该项为必填!">
</td>
</tr>
<tr class="tableStyle" height="40px" >
<td width="15%" class="tableStyle">团队名：</td>
<td>
<input id="team" name="team" class="easyui-textbox" style="width: 150px" required="true" missingMessage="该项为必填!">
</td>
<td width="15%" class="tableStyle" height="35px">负责人：</td>
<td>
<input id="pic" name="pic" class="easyui-textbox" style="width: 150px" required="true" missingMessage="该项为必填!">
</td>
</tr>
</table><br>
<center>
<a id="confirm" class="easyui-linkbutton" align='center' style="width: 80">确定</a>
<a id="cancel" class="easyui-linkbutton" align='center' style="width: 80">取消</a>
</center>
</form>
</div>/*
*提交新增表单方法
*/
$("#confirm").click(function(){
$('#userForm').form('submit',{ //做一个提交操作
url:'login/addAgent.action',
onSubmit: function(){ //在提交之前触发，提交一个有效的且放重复的表单
var isValid = $("#userForm").form('validate');//做表单字段验证
if (!isValid){
$.messager.alert("提示信息","请输入完整的信息！","info"); // 如果表单是无效的则隐藏进度条
}
return isValid; // 返回false终止表单提交
},
success:function(result){ //回调函数
if(result=="ok"){
$.messager.show({
title:'提示',
msg:'操作成功'
});
$("#userDialog").dialog('close');//关闭新增框
$("#userTable").datagrid('reload');
$('#userForm').form('clear');
}else{
$.messager.show({
title:'提示',
msg:'操作失败'
});
}
}
});
}); 
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
