easyUI左右栏动态刷新

本文介绍了使用easyUI实现页面布局中左右两栏的动态刷新功能。左侧列表通过`datagrid`加载数据,右侧详情面板在选择列表项时,根据选定的ID通过AJAX获取新数据并刷新显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<div id="cycle" class="easyui-layout" data-options="fit:true,border:false">

<div  data-options="region:'west',title:'列表',split:true,border:false" style="width:350px;">

 <table id="cycle_index_datagrid">  
   
     </table>

        </div>

       <div id="staff_cycle_detail" class="easyui-layout"  data-options="region:'center',title:'详情',border:false">

<table  id="staff_cycle_index_datagrid"  class="easyui-datagrid">

               </table>

        </div>

</div>


$("#cycle_index_datagrid").datagrid({

  url: '{:U("cycle/index")}',
    idField: 'staff_id',
    fit: true,
    fitColumns: true,
    singleSelect: true,
    rownumbers: true,
    pagination: true,
    border: false,
    pageSize: c_page_size,
    pageList: c_page_list,
    toolbar: '#cycle_index_toolbar',
    columns: [[
        {field: 'staff_id', checkbox:true},
        {field: 'staff_name', title: '业务员', align: 'center'},
        {field: 'mobile', title: '电话',align: 'center'},
        {field: 'job_post', title: '职位', align: 'center'},        
    ]],
    onLoadSuccess: function () {

    },
    onSelect: function(index,row) {
       //  var 
       // alert(row.staff_id);
       //$('#pp').panel('open').panel('refresh','new_content.php');
    var cycle_times=0;
    $.ajax({
    url: '{:U("cycle/getCycleTimes")}',
    dataType: 'json',
    success:function(rsp){
    if(rsp.result){

    cycle_times=rsp.message;
    url="__URL__/cycle?cycle_times="+cycle_times+"&staff_id="+row.staff_id;         $('#staff_cycle_detail').panel('open').panel('refresh',url);   //选择某一行刷新右边的面板 

    }else{
    message(rsp.message);
    return;
    }
    }
    });
    } 
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值