EasyUI datagrid toolbar常用的两种形式

第一种
 <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=" 添 加 " οnclick="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="修改" οnclick="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" οnclick="addCustomer()" value="   " title="添加"/>';
str+='<input type="button" class="icon-edit" οnclick="updateCustomer(\''+rec.cus_id+'\',\''+rec.cus_name+'\',\''+rec.cus_addr+'\')" value="  " title="修改"/>';
str+='<input type="button" class="icon-remove" οnclick="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="添加" οnclick="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="修改" οnclick="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>&nbsp;&nbsp;&nbsp;
<a id="btn" href="javascript:alert(  $('#typeid').val() )" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>  
</div>
效果图
 图片
第三种
$(function(){
$('#orderInfo').datagrid({
    url:'../json/orderAction_getOrderInfos',
    fitColumns:true,
    striped:true,
    nowrap:true,
    loadMsg:'数据正在加载,请稍后...', 
    pagination:true,
    rownumbers:true,
    columns:[[    //原有easyui是不支持子属性取值的,如customer.cus_name,可修改easyui源码9075行原有代码:var _69f=_69c[_69e];改为var _69f = eval("_69c['" + _69e.replace(/\./g, "']['") + "']");
        {field:'od_id',title:'选择',width:100,checkbox:true},   
        {field:'od_order_date',title:'下单日期',width:200,align:'center'},
        {field:'od_deliver_date',title:'发货日期',width:200},
        {field:'customer.cus_name',title:'购买用户',width:200},
        {field:'od_addr',title:'收获地址',width:200},
        {field:'od_status',title:'订单状态',width:100,align:'center'},
        {field:'_operate',title:'操作',width:100,align:'center',  
            formatter:function(value,rowData){
             var str = "";  //函数需要定义在index.html页面中,即最外层的容器中。
             if(rowData.od_status=="已下单"){
             str+='<a class="icon-edit1 icon-padding" href="javascript:deliverGoods(\'' + rowData.od_id +'\')" title="发货">发货</a>&nbsp;&nbsp;';
             }
             str+='<a class="icon-file icon-padding" href="javascript:showDetailInfo(\'' +  rowData.od_id + '\');"  title="详细">详细</a>';
             return str;
            }
        }  
    ]],

    //工具栏
    toolbar: [{
text:'删除订单信息',
iconCls: 'icon-remove',
handler: function(){
delProduct();
}
}]
}); 
//分页控件 
var mypage=$("#orderInfo").datagrid('getPager');
$(mypage).pagination({
pageNumber:1,  //初始页数
pageSize:10, //默认每页显示的条数
pageList:[10,20,30],  //每页显示的记录数选项
beforePageText:'第',
afterPageText:'页  共 {pages} 页',
displayMsg:'当前显示 {from}-{to} 条记录   共 {total} 条记录 '
});
})
</script> 

图片 

发布了70 篇原创文章 · 获赞 78 · 访问量 21万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览