|
第一种
<table id="userInfo"></table> <script>
$(function(){
$(‘#userInfo‘).datagrid({
url:‘../json/customerAction_getCustomerInfo‘,
fitColumns:true,
striped:true,
nowrap:true,
loadMsg:‘数据正在加载，请稍后...‘,
pagination:true,
rownumbers:true,
columns:[[
{field:‘cus_id‘,title:‘选择‘,width:200,checkbox:true},
{field:‘cus_name‘,title:‘用户名称‘,width:400,sortable:true},
{field:‘cus_addr‘,title:‘联系地址‘,width:400,sortable:true}
]],
//工具栏
toolbar: [{
text:‘添加用户信息‘,
iconCls: ‘icon-add‘,
handler: function(){
addCustomer();
}
},‘-‘,{
text:‘修改用户信息‘,
iconCls: ‘icon-edit‘,
handler: function(){
updateCustomer();
}
},‘-‘,{
text:‘删除用户信息‘,
iconCls: ‘icon-remove‘,
handler: function(){
delCustomer();
}
}]
});
//分页控件
var mypage=$("#userInfo").datagrid(‘getPager‘);
$(mypage).pagination({
pageNumber:1, //初始页数
pageSize:10, //默认每页显示的条数
pageList:[10,20,30], //每页显示的记录数选项
beforePageText:‘第‘,
afterPageText:‘页 共 {pages} 页‘,
displayMsg:‘当前显示 {from}-{to} 条记录 共 {total} 条记录 ‘
});
})
function addCustomer(){
$("#cus_name").val("");
$("#cus_addr").val("");
$("#addUsers").dialog(‘open‘);
}
//添加用户信息
function addUserInfo(){
var name=$.trim( $("#cus_name").val() );
var addr=$.trim( $("#cus_addr").val() );
if(name==""){
return;
}if(addr==""){
return;
}else{
$.post("../json/customerAction_addCustomer",{‘customer.cus_name‘:name,‘customer.cus_addr‘:addr},function(data){
data=parseInt($.trim(data) );
if(data>=1){
$.messager.show({
title:‘成功提示‘,
msg:‘用户信息添加成功...‘,
timeout:2000,
showType:‘slide‘
});
//关闭添加信息窗口
$("#addUsers").dialog(‘close‘);
//刷新数据
$("#userInfo").datagrid(‘load‘,{});
}else{
$.messager.alert(‘失败提示‘,‘用户信息添加失败...‘,‘error‘);
$("#userInfo").datagrid(‘load‘,{});
}
});
}
}
//显示修改对话框
function updateCustomer(){
//选取要修改的数据
var rows=$("#userInfo").datagrid(‘getChecked‘);
//判断有没有选择要修改的数据
if(rows.length<=0){ //说明用户没有选择数据
$.messager.show({
title:‘错误提示‘,
msg:‘请选择您要修改的数据...‘,
timeout:2000,
showType:‘slide‘
});
return;
}
//如果用户有选择数据，则选取用户选定的第一条要修改的数据，并将其原值显示在对话框中
var cid=rows[0].cus_id;
var cname=rows[0].cus_name;
var caddr=rows[0].cus_addr;
$("#cid").val(cid);
$("#cname").val(cname);
$("#caddr").val(caddr);
$("#updateUsers").dialog(‘open‘);
}
//修改
function updateCustomerInfo(){
var cname=$.trim( $("#cname").val() );
var caddr=$.trim( $("#caddr").val() );
var cid=$.trim( $("#cid").val() );
if(cname==""){
return;
}else if(caddr==""){
return;
}else{
$.post("../json/customerAction_updateCustomer",{‘customer.cus_name‘:cname,‘customer.cus_id‘:cid,‘customer.cus_addr‘:caddr},function(data){
data=parseInt( $.trim(data) );
if(data>=1){
$.messager.show({
title:‘成功提示‘,
msg:‘用户信息修改成功....‘,
timeout:2000,
showType:‘slide‘
});
//关闭添加信息窗口
$("#updateUsers").dialog(‘close‘);
//刷新数据
$("#userInfo").datagrid(‘load‘,{});
}else{
$.messager.alert(‘失败提示‘,‘用户信息修改失败...‘,‘error‘);
$("#userInfo").datagrid(‘load‘,{});
}
});
}
}
function delCustomer(){
var rows=$("#userInfo").datagrid(‘getChecked‘); //选取要删除的数据
//判断有没有选择要删除的数据
if(rows.length<=0){ //说明用户没有选择数据
$.messager.show({
title:‘错误提示‘,
msg:‘请选择您要删除的数据...‘,
timeout:2000,
showType:‘slide‘
});
return;
}
//如果用户有选择数据，警告用户小心操作
$.messager.confirm("确认提示","数据一旦删除，将不能恢复，您确定要删除选定数据吗?",function(rt){
if(rt){
//获取用户选中的所有数据的id in(1001,1002)
var cid="";
for(var i=0;i<rows.length-1;i++){
cid+=rows[i].cus_id+",";
}
cid+=rows[i].cus_id;
$.post("../json/customerAction_delCustomer",{ids:cid},function(data){
data=parseInt( $.trim(data) );
if(data>=1){
$.messager.show({
title:‘成功提示‘,
msg:‘用户信息删除成功...‘,
timeout:2000,
showType:‘slide‘
});
//刷新数据
$("#userInfo").datagrid(‘load‘,{});
}else{
$.messager.alert(‘失败提示‘,‘用户信息删除失败...‘,‘error‘);
$("#userInfo").datagrid(‘load‘,{});
}
});
}else{
return;
}
});
}
</script>
<div id="addUsers" class="easyui-dialog" title="添加用户信息" style="width:400px;height:200px;text-align:center"
data-options="iconCls:‘icon-add‘,resizable:true,modal:true,closed:true">
<br />
用户名称：<input type="text" id="cus_name"/><br /><br />
联系地址：<input type="text" id="cus_addr" /><br /><br />
<input type="button" value=" 添 加 " onclick="addUserInfo()"/>
</div>
<div id="updateUsers" class="easyui-dialog" title="修改用户信息" style="width:400px;height:200px;text-align:center"
data-options="iconCls:‘icon-add‘,resizable:true,modal:true,closed:true">
<br />
<input type="hidden" id="cid"/>
用户名称：<input type="text" id="cname" /><br /><br />
联系地址：<input type="text" id="caddr" /><br /><br />
<input type="button" value="修改" onclick="updateCustomerInfo()"/>
</div>
效果图： 第二种 <table id="userInfo"></table>
<script>
$(function(){
$(‘#userInfo‘).datagrid({
url:‘../json/customerAction_getAllCustomerInfo‘,
fitColumns:true,
striped:true,
nowrap:true,
loadMsg:‘数据加载中,请稍后...‘,
pagination:true,
rownumbers:true,
columns:[[
{field:‘cus_id‘,title:‘用户编号‘,width:200,align:‘center‘},
{field:‘cus_name‘,title:‘用户名次‘,width:200,},
{field:‘cus_addr‘,title:‘联系地址‘,width:400,},
{field:‘opt‘,title:‘操作‘,width:200,align:‘center‘,formatter:function(val,rec){
var str=‘<input type="button"
class="icon-add" onclick="addCustomer()" value=" " title="添加"/>‘;
str+=‘<input type="button"
class="icon-edit" onclick="updateCustomer(\‘‘+rec.cus_id+‘\‘,\‘‘+rec.cus_name+‘\‘,\‘‘+rec.cus_addr+‘\‘)" value=" " title="修改"/>‘;
str+=‘<input type="button"
class="icon-remove" onclick="delCustomer(‘+rec.cus_id+‘)" value=" " title="删除"/>‘;
return str;
}}
]],
toolbar:"#searchInfo"
});
var mypages=$("#userInfo").datagrid(‘getPager‘);
$(mypages).pagination({
pageNumber:1,
pageSize:10,
pageList:[10,20,30,40],
beforePageText:‘第‘,
afterPageText:‘页 共{pages}页‘,
displayMsg:‘当前显示{from}-{to}
条记录 共{total}条记录‘
});
});
//点击添加图标按钮时
function addCustomer(){
$("#cus_name").val("");
$("#cus_addr").val("");
$("#addUserInfo").dialog("open");
}
function addUserInfo(){
var uname=$.trim( $("#cus_name").val()
);
var addr=$.trim( $("#cus_addr").val()
);
if(uname==""){
return;
}
if(addr==""){
return;
}
$.post("../json/customerAction_addCustomer",{‘customer.cus_name‘:uname,‘customer.cus_addr‘:addr},function(data){
data=parseInt( $.trim(data)
);
if(data>=1){
$.messager.show({
title:‘成功提示‘,
msg:‘用户信息添加成功...‘,
timeout:2000,
showType:‘slide‘
});
//关闭弹出框
$("#addUserInfo").dialog("close");
//刷新数据
$("#userInfo").datagrid(‘load‘,{});
}else{
$.messager.alert(‘失败提示‘,‘用户信息添加失败...‘,‘error‘);
}
});
}
function updateCustomer(cid,cname,addr){
//选取你要修改的行
$("#cid").val(cid);
$("#cname").val(cname);
$("#caddr").val(addr);
$("#updateUserInfo").dialog(‘open‘);
}
function updateUserInfo(){
var uname=$.trim( $("#cname").val()
);
var addr=$.trim( $("#caddr").val()
);
var cid=$.trim( $("#cid").val()
);
if(uname==""){
return;
}
if(addr==""){
return;
}
$.post("../json/customerAction_updateCustomer",{‘customer.cus_id‘:cid,‘customer.cus_name‘:uname,‘customer.cus_addr‘:addr},function(data){
data=parseInt( $.trim(data)
);
if(data>=1){
$.messager.show({
title:‘成功提示‘,
msg:‘用户信息修改成功...‘,
timeout:2000,
showType:‘slide‘
});
//关闭弹出框
$("#updateUserInfo").dialog("close");
//刷新数据
$("#userInfo").datagrid(‘load‘,{});
}else{
$.messager.alert(‘失败提示‘,‘用户信息修改失败...‘,‘error‘);
}
});
}
//删除用户信息
function delCustomer(cid){
$.messager.confirm(‘确认提示‘,‘数据一旦删除，将不能恢复，您确定要删除选中的记录吗？‘,function(rt){
if(rt){
//将要删除的数据的id发送到服务
$.post("../json/customerAction_delCustomer",{cids:cid},function(data){
data=parseInt( $.trim(data)
);
if(data>=1){
$.messager.show({
title:‘成功提示‘,
msg:‘数据删除的成功...‘,
timeout:2000,
showType:‘slide‘
});
//刷新数据
$("#userInfo").datagrid(‘load‘,{});
}else{
$.messager.alert(‘失败提示‘,‘用户信息删除失败...‘,‘error‘);
//$("#userInfo").datagrid(‘load‘,{});
}
});
}else{
return;
}
});
}
</script>
<div id="addUserInfo" class="easyui-dialog" title="添加用户信息" style="width:400px;height:160px;text-align:center"
data-options="iconCls:‘icon-add‘,resizable:true,modal:true,closed:true">
<br />
用户名称：<input type="text"
id="cus_name" /><br /><br/>
联系地址：<input type="text"
id="cus_addr" /><br /><br/>
<input type="button" value="添加"
onclick="addUserInfo()" />
</div>
<div id="updateUserInfo" class="easyui-dialog" title="修改用户信息" style="width:400px;height:160px;text-align:center"
data-options="iconCls:‘icon-edit‘,resizable:true,modal:true,closed:true">
<br />
<input type="hidden" id="cid">
用户名称：<input type="text"
id="cname" /><br /><br/>
联系地址：<input type="text"
id="caddr" /><br /><br/>
<input type="button" value="修改"
onclick="updateUserInfo()" />
</div>
<div id="searchInfo" style="width:100%;text-align:center;">
<select name="typeid" id="typeid"
style="border:1px solid #ccc;width:200px;height:24px;">
<option value="1001">超级管理员</option>
<option value="1002">总经理</option>
<option value="1003">总监</option>
<option value="1004">部门经理</option>
</select>
<a id="btn" href="javascript:alert(
$(‘#typeid‘).val() )" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘">搜索</a>
</div>
效果图
|
EasyUI datagrid toolbar常用的两种形式
原文地址：http://blog.csdn.net/qfxsxhfy/article/details/45418353
