第一种<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()"/>
一个人身边的位置只有这么多，
