Tabs
首页
用户管理
系统管理
2.相关属性
class=“easyui-linkbutton” 代表使用linkbutton的样式渲染
plain:true 是否显示边框
size:‘large’ 是否启用大图标
iconAlign:‘bottom’ 设置图标的所在位置 left top right bottom
SearchBox[熟悉]
searcher :点击右边的放大镜触发的事件
menu 设置输入框左边的下拉选项
Tree
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>06tree.jsp</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css">
<script type="text/javascript" src="resources/easyui/jquery.min.js"></script>
<script type="text/javascript" src="resources/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="resources/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body >
<div class="easyui-panel" style="padding:5px">
<ul id="tt" class="easyui-tree" data-
options="url:'json/tree.json',method:'get',animate:true,lines:true,checkbox:true
,onDblClick: function(node){
$(this).tree('beginEdit',node.target);
},
onAfterEdit:function(node){
alert(node.text+' '+node.id);
}
"></ul>
</div>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'"
onclick="getSelectedNodes()">得到选中节点</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'"
onclick="initTreeWithJs()">使用js初始化树</a>
<div class="easyui-panel" style="padding:5px">
<div id="tt2" class="easyui-tree" ></div>
</div>
</body>
<script type="text/javascript">
function getSelectedNodes(){
var nodes1 = $('#tt').tree('getChecked'); // get checked nodes
var nodes2 = $('#tt').tree('getChecked', 'unchecked'); // get unchecked nodes
var nodes3 = $('#tt').tree('getChecked', 'indeterminate'); // get indeterminate nodes
var nodes4 = $('#tt').tree('getChecked', ['checked','indeterminate']); // get checked
and indeterminate nodes
con(nodes1);
alert("--------------");
con(nodes2);
alert("--------------");
con(nodes3);
alert("--------------");
con(nodes4);
alert("--------------");
}
function con(nodes){
for(var i=0;i<nodes.length;i++){
alert(nodes[i].text);
}
}
function initTreeWithJs(){
$("#tt2").tree({
url:'json/tree.json',
method:'get',
animate:true,
lines:true,
checkbox:true,
onDblClick: function(node){
$(this).tree('beginEdit',node.target);
},
onAfterEdit:function(node){
alert(node.text+' '+node.id);
}
});
}
</script>
</html>
树的json格式
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend",
"iconCls":"icon-add"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}]
十一、ComboTree【下拉树】
<body >
<div class="easyui-panel" style="padding:5px;width: 50%">
<input id="cc" class="easyui-combotree" data-
options="url:'json/tree.json',method:'get',label:'Select
Node:',labelPosition:'top',multiple:true" style="width:100%">
</div>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">Disable</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">Enable</a>
</body>
<script type="text/javascript">
function getValue(){
var val = $('#cc').combotree('getValue');
alert(val);
}
function setValue(){
$('#cc').combotree('setValue', '122');
}
function disable(){
$('#cc').combotree('disable');
}
function enable(){
$('#cc').combotree('enable');
}
</script>
相关属性
url:‘json/tree.json’,
method:‘get’,
label:‘Select Node:’, 设置下拉框的标记
labelPosition:‘left’, 设置标记文字的位置 top left 默认为top
labelWidth:‘20%’, 设置标记文字的宽度
labelAlign:‘right’, 标记文字的对齐方式left center right 默认为left
multiple:true 是否启多选
TextBox、文本域
<div style="margin-bottom:20px">
<input class="easyui-textbox" data-options="label:'用户
名:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户名',
value:'admin',editable:true,readonly:false,required:true
" style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" data-options="label:'用户备
注:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户备注',multiline:true"
style="width:100%;height: 60px">
</div>
相关属性
value 设置默认值
editable 设置是否可以编辑，但是可以得到焦点
readonly 设置是否只读，如果只读就不会得到焦点
disable 设置不可用
required 是否启用非空验证
multiline 是否启用多多输入
RadioButton
在easyui的低版本里面是没有RadioButton
<div style="margin-bottom:20px">
<label class="textbox-label" style="text-align: right;">爱好:</label>
<input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50"
name="fruit" value="DOTA" label="DOTA">
<div style="display: inline-block;width: 30px"></div>
<input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50"
name="fruit" value="DNF" label="DNF">
<div style="display: inline-block;width: 30px"></div>
<input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50"
name="fruit" value="CF" label="CF">
<div style="display: inline-block;width: 30px"></div>
<input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50"
name="fruit" value="LOL" label="LOL">
</div>
<div style="margin-bottom:20px">
<label class="textbox-label" style="text-align: right;">爱好:</label>
<input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50"
name="fruit" value="DOTA"><label style="margin-left: 10px">DOTA</label>
<div style="display: inline-block;width: 30px"></div>
<input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50"
name="fruit" value="DNF" ><label style="margin-left: 10px">DNF</label>
<div style="display: inline-block;width: 30px"></div>
<input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50"
name="fruit" value="CF"><label style="margin-left: 10px">CF</label>
<div style="display: inline-block;width: 30px"></div>
<input class="easyui-radiobutton" data-options="labelAlign:'left',labelWidth:50"
name="fruit" value="LOL"><label style="margin-left: 10px">LOL</label>
</div>
十七、ComboBox[下拉列表]
json
[
{“id”:1,“name”:“水瓶座”},
{“id”:2,“name”:“金牛座”},
{“id”:3,“name”:“双鱼座”},
{“id”:4,“name”:“狮子座”},
{“id”:5,“name”:“双子座”},
{“id”:6,“name”:“射手座”}
]
html
相关属性
valueField:‘id’ 当数据来源一json请求时把json里面的id属性值作为其option的value的值
textField:‘name’ 当数据来源一json请求时把json里面的name属性值作为其option的显示值
FileBox[文件上传]
<div style="margin-bottom:20px">
<input class="easyui-filebox" data-options="label:'用户头
像:',labelPosition:'left',labelAlign:'right',prompt:'请选择用户头像'"
style="width:70%;">
<a class="easyui-linkbutton" data-options="iconCls:'icon-add'">上传</a>
</div>
ValidateBox
<body >
<div class="easyui-panel" title="用户注册" style="padding:5px;width: 50%">
<form action="">
<div style="margin-bottom:20px">
<input class="easyui-textbox" data-
options="required:true,validType:'length[6,10]',label:'用户
名:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户名'"
style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" data-
options="required:true,validType:'email',label:'邮
箱:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户邮箱'"
style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" data-options="required:true,validType:'url',label:'博
客:',labelPosition:'left',labelAlign:'right',prompt:'请输入博客地址'"
style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" data-
options="required:true,validType:'phone',label:'电
话:',labelPosition:'left',labelAlign:'right',prompt:'请输入电话'"
style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-passwordbox" id="pwd1" data-options="required:true,label:'密码
1:',labelPosition:'left',labelAlign:'right',prompt:'请输入密码1'"
style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-passwordbox" validType="equals['#pwd1']" data-
options="required:true,label:'密码
2:',labelPosition:'left',labelAlign:'right',prompt:'请输入密码2'"
style="width:100%;">
</div>
</form>
</div>
</body>
<script type="text/javascript">
$.extend($.fn.validatebox.defaults.rules, {
equals: {
validator: function(value,param){
return value == $(param[0]).val();
},
message: '两次密码不一致.'
},
phone: {
validator: function(value){
var TEL_REGEXP = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
if(TEL_REGEXP.test(value)){
return true;
}
return false;
},
message: '请输入有效的手机号.'
}
});
</script>
</html>
自带的验证规则
required:true 非空验证
validType:‘length[6,10]’ 长度验证
validType:‘url’ 链接地址验证
validType:‘email’ 邮箱地址验证
自定义验证规则
Form[表单]
1.相关代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>11form.jsp</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css">
<script type="text/javascript" src="resources/easyui/jquery.min.js"></script>
<script type="text/javascript" src="resources/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="resources/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body >
<div class="easyui-panel" title="用户注册" style="padding:5px;width: 50%">
<form action="" method="get" id="dataFrm">
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="username" value="administrator" data-
options="required:true,validType:'length[6,20]',label:'用户
名:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户名'"
style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="email" value="88888@qq.com" data-
options="required:true,validType:'email',label:'邮
箱:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户邮箱'"
style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="blog" value="http://laolei.vip" data-
options="required:true,validType:'url',label:'博
客:',labelPosition:'left',labelAlign:'right',prompt:'请输入博客地址'"
style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="phone" value="13411111111" data-
options="required:true,validType:'phone',label:'电
话:',labelPosition:'left',labelAlign:'right',prompt:'请输入电话'"
style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-passwordbox" name="pwd" id="pwd1" data-
options="required:true,label:'密码
1:',labelPosition:'left',labelAlign:'right',prompt:'请输入密码1'"
style="width:100%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-passwordbox" name="pwd2" validType="equals['#pwd1']" data-
options="required:true,label:'密码
2:',labelPosition:'left',labelAlign:'right',prompt:'请输入密码2'"
style="width:100%;">
</div>
<div style="margin-bottom:20px">
<label class="textbox-label" style="text-align: right;">性别:</label>
<input class="easyui-radiobutton" data-options="labelAlign:'right',labelWidth:50"
name="sex" value="1" label="男">
<div style="display: inline-block;width: 30px"></div>
<input class="easyui-radiobutton" data-options="labelAlign:'right',labelWidth:50"
name="sex" value="0" label="女">
</div>
<div style="margin-bottom:20px">
<label class="textbox-label" style="text-align: right;">爱好:</label>
<input class="easyui-checkbox" data-options="labelAlign:'right',labelWidth:50"
name="hobby" value="DOTA" label="DOTA">
<div style="display: inline-block;width: 30px"></div>
<input class="easyui-checkbox" data-options="labelAlign:'right',labelWidth:50"
name="hobby" value="DNF" label="DNF">
<div style="display: inline-block;width: 30px"></div>
<input class="easyui-checkbox" data-options="labelAlign:'right',labelWidth:50"
name="hobby" value="CF" label="CF">
<div style="display: inline-block;width: 30px"></div>
<input class="easyui-checkbox" data-options="labelAlign:'right',labelWidth:50"
name="hobby" value="LOL" label="LOL">
</div>
<div style="margin-bottom:20px">
<select class="easyui-combobox"
data-options="url:'json/combobox.json',
method:'get',valueField:'id',textField:'name',label:'星
座:',labelPosition:'left',labelAlign:'right'"
style="width:100%;">
</select>
</div>
<div style="margin-bottom:20px;text-align: center;" >
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="doSubmit">提交
</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-reload'"
onclick="javascript:$('#dataFrm').form('reset');">重置</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'"
onclick="javascript:$('#dataFrm').form('clear');">clear</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="doLoad">装载</a>
</div>
</form>
</div>
</body>
<script type="text/javascript">
$.extend($.fn.validatebox.defaults.rules, {
equals: {
validator: function(value,param){
return value == $(param[0]).val();
},
message: '两次密码不一致.'
},
phone: {
validator: function(value){
var TEL_REGEXP = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
if(TEL_REGEXP.test(value)){
return true;
}
return false;
},
message: '请输入有效的手机号.'
}
});
//监听提交事件
$("#doSubmit").click(function(){
$.messager.progress(); // display the progress bar
$('#dataFrm').form('submit', {
url: 'index.jsp',
method:'post',
onSubmit: function(){
var isValid = $(this).form('validate');//触发验证
if (!isValid){
$.messager.progress('close'); // hide progress bar while the form is
invalid
}
return isValid; // return false will stop the form submission
},
success: function(data){//提交成功之后的回调方法
$.messager.progress('close'); // hide progress bar while submit successfully
}
});
});
//装载
$("#doLoad").click(function(){
var json={
username:'zhangxiaoming',
email:'99999@qq.com',
blog:'http://laolei.tech',
phone:'15333331113',
pwd:'123456',
pwd2:'123456',
sex:1,
hobby:["DOTA","LOL","CF"]
};
//$('#dataFrm').form("load",json);
$('#dataFrm').form("load","json/user.json");
});
</script>
</html>
2.相关方法
1，submit
2，load
3，clear
4，reset
Dialog[弹出层]
1.使用HTML的实现方式[重点]
<div id="dlg" class="easyui-dialog" style="width:600px;height: 400px" data-
options="title:'添加用户',iconCls:'icon-add',closed:true, modal: true,
collapsible:true,minimizable:true,maximizable:true,resizable:true,toolbar:'#dlg-
tools',buttons:'#dlg-buttons'
">
我是弹出层里面的内容
</div>
<div id="dlg-tools">
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'">修改</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-reload'">删除</a>
</div>
<div id="dlg-buttons" style="text-align:center;">
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'"
onclick="javascript:$('#dlg').dialog('close');">取消</a>
</div>
2.使用JS的实现方式[熟悉]
$("#dlg2").dialog({
title:'添加用户',
iconCls:'icon-add',
closed:true,
modal: true,
collapsible:true,
minimizable:true,
maximizable:true,
resizable:true,
href:'11form.jsp',
method:'get'
//toolbar:'#dlg-tools',
//buttons:'#dlg-buttons'
});
Messager
<body>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn1">打开
1alert</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn2">打开
2confirm</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn3">打开
3prompt</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn4">打开
4progress</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn5">打开
5show</a>
</body>
<script type="text/javascript">
$("#btn1").click(function(){
$.messager.alert('Warning','The warning message');
});
$("#btn2").click(function(){
$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
if (r){
alert('ok');
}
});
});
$("#btn3").click(function(){
$.messager.prompt('Prompt', 'Please enter your name:', function(r){
if (r){
alert('Your name is:' + r);
}
});
});
$("#btn4").click(function(){
$.messager.progress(); //打开进度条
$.messager.progress("close"); //关闭进度条
});
$("#btn5").click(function(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
//timeout:5000,
showType:'show'
});
});
</script>
DataGrid【数据表格】
1.JSON格式
{
"total":30,rows:[
{},{},{}
]
}
{"total":28,"rows":[
{"productid":"FI-SW-
01","productname":"Koi","unitcost":"10.00","status":"1","listprice":"36.50","attr1":"Large",
"itemid":"EST-1"},
{"productid":"K9-DL-
01","productname":"Dalmation","unitcost":"12.00","status":"1","listprice":"18.50","attr1":"S
potted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-
01","productname":"Rattlesnake","unitcost":"12.00","status":"1","listprice":"38.50","attr1":
"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-
01","productname":"Rattlesnake","unitcost":"12.00","status":"0","listprice":"26.50","attr1":
"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-
02","productname":"Iguana","unitcost":"12.00","status":"0","listprice":"35.50","attr1":"Gree
n Adult","itemid":"EST-13"},
{"productid":"FL-DSH-
01","productname":"Manx","unitcost":"12.00","status":"1","listprice":"158.50","attr1":"Taill
ess","itemid":"EST-14"},
{"productid":"FL-DSH-
01","productname":"Manx","unitcost":"12.00","status":"0","listprice":"83.50","attr1":"With
tail","itemid":"EST-15"},
{"productid":"FL-DLH-
02","productname":"Persian","unitcost":"12.00","status":"1","listprice":"23.50","attr1":"Adu
lt Female","itemid":"EST-16"},
{"productid":"FL-DLH-
02","productname":"Persian","unitcost":"12.00","status":"0","listprice":"89.50","attr1":"Adu
lt Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon
Parrot","unitcost":"92.00","status":"1","listprice":"63.50","attr1":"Adult
Male","itemid":"EST-18"}
]}
2.使用html实现
<body>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn1">打开1alert</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn2">打开2confirm</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn3">打开3prompt</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn4">打开4progress</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn5">打开5show</a>
<table class="easyui-datagrid" style="width:'100%';height:250px"
data-options="title:'数据列表',iconCls:'icon-
save',singleSelect:true,collapsible:true,url:'json/datagrid.json',method:'get',
fitColumns:true,toolbar:'#tb',loadMsg:'数据正在努力加载中。。。',emptyMsg:'查无数据',
pagination:true,rownumbers:true,pagePosition:'bottom',pageNumber:1,pageSize:10,pageList:
[5,10,15,20,25]
">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th data-
options="field:'itemid',width:80,title:'ID',width:100,align:'center',halign:'center'">ID</th>
<th data-options="field:'productid',width:100,hidden:true">Product</th>
<th data-options="field:'listprice',width:80,align:'right',sortable:true">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-
options="field:'status',width:60,align:'center',formatter:statusFmt">Status</th>
</tr>
</thead>
</table>
<div id="tb">
<a class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
</div>
</body>
<script type="text/javascript">
function statusFmt(value,row,index){
return value==1?'男':'女';
}
$("#btn1").click(function(){
});
$("#btn2").click(function(){
});
$("#btn3").click(function(){
});
$("#btn4").click(function(){
});
$("#btn5").click(function(){
});
</script>
</html>
3.使用js实现[掌握]
<body>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn1">刷新</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn2">得到选中行</a>
<table id="tb" style="width:'100%';height:250px" ></table>
<div id="toolbar">
<a class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
</div>
</body>
<script type="text/javascript">
//加载表格数据
$("#tb").datagrid({
title:'数据列表',
iconCls:'icon-save',
singleSelect:true,
collapsible:true,
url:'json/datagrid.json',
method:'get',
fitColumns:true,
toolbar:'#toolbar',
loadMsg:'数据正在努力加载中。。。',
emptyMsg:'查无数据',
pagination:true,
rownumbers:true,
pagePosition:'bottom',
pageNumber:1,
pageSize:10,
pageList:[5,10,15,20,25],
columns:[[
{field:'ck',checkbox:true},
{field:'itemid',width:80,title:'Item
ID',width:100,align:'center',halign:'center'},
{field:'productid',width:100,hidden:true,title:'productid'},
{field:'listprice',width:80,align:'right',sortable:true,title:'listprice'},
{field:'unitcost',width:80,align:'right',title:'unitcost'},
{field:'attr1',width:250,title:'attr1'},
{field:'status',width:60,align:'center',title:'statu',formatter:function(value,row,index){
return value==1?'男':'女';
}}
]],
onDblClickRow:function(index,row){
alert(row.itemid+" "+row.status);
},
});
function statusFmt(value,row,index){
return value==1?'男':'女';
}
$("#btn1").click(function(){
$("#tb").datagrid("reload");
});
$("#btn2").click(function(){
var row=$("#tb").datagrid("getSelected");
if(row){
$.messager.show({
title:"提示",
msg:'选择中了'+row.productid
});
}else{
$.messager.show({
title:"提示",
msg:'请选中操作行'
});
}
});
</script>
</html>
综合案例
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath =
request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>14datagrid1.jsp</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css">
<script type="text/javascript" src="resources/easyui/jquery.min.js"></script>
<script type="text/javascript" src="resources/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="resources/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<!-- 用户数据表格开始 -->
<table id="userTb" style="width:'100%';height:350px" ></table>
<div id="toolbar">
<a class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" id="addUser">
添加用户</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"
id="updateUser">修改用户</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"
id="deleteUser">删除用户</a>
</div>
<!-- 用户数据表格结束 -->
<!-- 添加 修改的弹出层开始 -->
<div id="dlg" class="easyui-dialog" style="width:600px;height: 400px" data-
options="title:'添加用户',iconCls:'icon-add',closed:true, modal: true,
collapsible:true,minimizable:true,maximizable:true,resizable:true,buttons:'#dlg-buttons'
">
<form action="" method="get" id="dataFrm">
<div style="margin-bottom:20px;margin-top: 20px;">
<input class="easyui-textbox" name="userid" data-options="required:true,label:'用户
ID:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户名'" style="width:95%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="username" data-options="required:true,label:'用
户名:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户名'" style="width:95%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="money" data-options="required:true,label:'存
款:',labelPosition:'left',labelAlign:'right',prompt:'请输入用户邮箱'"
style="width:95%;">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="remark" data-options="required:true,label:'备
注:',labelPosition:'left',labelAlign:'right',prompt:'请输入博客地址'"
style="width:95%;">
</div>
<div style="margin-bottom:20px">
<label class="textbox-label" style="text-align: right;">性别:</label>
<input class="easyui-radiobutton" data-options="labelAlign:'right',labelWidth:50"
name="sex" value="1" label="男" checked="checked">
<div style="display: inline-block;width: 30px"></div>
<input class="easyui-radiobutton" data-options="labelAlign:'right',labelWidth:50"
name="sex" value="0" label="女">
</div>
</form>
</div>
<div id="dlg-buttons" style="text-align:center;">
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="doSubmit">保存</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'"
onclick="javascript:$('#dlg').dialog('close');">取消</a>
</div>
<!-- 添加 修改的弹出层结束 -->
</body>
<script type="text/javascript">
//加载表格数据
$("#userTb").datagrid({
title:'用户列表',
iconCls:'icon-save',
singleSelect:true,
collapsible:true,
url:'json/datagrid_user.json',
method:'get',
fitColumns:true,
toolbar:'#toolbar',
loadMsg:'数据正在努力加载中。。。',
emptyMsg:'查无数据',
pagination:true,
rownumbers:true,
pagePosition:'bottom',
pageNumber:1,
pageSize:10,
pageList:[5,10,15,20,25],
columns:[[
{field:'userid',width:80,title:'用户编
号',width:100,align:'center',halign:'center'},
{field:'username',width:100,hidden:true,title:'用户姓名'},
{field:'sex',width:60,align:'center',title:'用户性
别',formatter:function(value,row,index){
return value==1?'男':'女';
}},
{field:'money',width:80,align:'right',sortable:true,title:'存款'},
{field:'remark',width:80,align:'right',title:'用户备注'}
]],
onDblClickRow:function(index,row){
alert(row.userid+" "+row.remark);
}
});
var url;
//打开添加页面
$("#addUser").click(function(){
$("#dlg").dialog("open").dialog("setTitle","添加用户");
//清空form里面的数据
$("#dataFrm").form("clear");
url="user/addUser.action";
});
//打开修改页面
$("#updateUser").click(function(){
var row=$("#userTb").datagrid("getSelected");
if(row){
$("#dlg").dialog("open").dialog("setTitle","修改用户");
//装载数据
$("#dataFrm").form("load",row);
url="user/updateUser.action";
}else{
$.messager.show({
title:"提示",
msg:'请选中操作行'
});
}
});
//保存
$("#doSubmit").click(function(){
$.messager.progress(); // 显示进度条
$('#dataFrm').form('submit', {
url: url,
method:'post',
onSubmit: function(){
var isValid = $(this).form('validate');//触发验证
if (!isValid){
$.messager.progress('close'); // 验证失败后关闭进度条
}
return isValid; // 返回验证状态
},
success: function(data){//提交成功之后的回调方法
$.messager.progress('close'); //关闭进度条
//刷新表格
$("#userTb").datagrid("reload");
}
});
});
$("#deleteUser").click(function(){
var row=$("#userTb").datagrid("getSelected");
if(row){
$.messager.confirm('提示','你确定要删除+'+row.username+'吗?',function(r){
if (r){
alert('ok 删除');
//刷新表格
$("#userTb").datagrid("reload");
}
});
}else{
$.messager.show({
title:"提示",
msg:'请选中操作行'
});
}
});
</script>
</html>
扫一扫
3823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
