• easyui中根据后台数据动态改变datagrid的列


    最近在做系统的时候需要根据后台提供的数据改变datagrid的列的field和 title,效果如下:

    在点击下拉框改变年份的时候动态改变列

    js 代码如下

    //获取选择的月份
    $('#Year_Combobox').combobox({
    value:nowYear, //当前年份
    panelHeight:true,
    onSelect:function(record){
    $.getJSON('interface/asynRead.php?cmd=getColumns',{
    year:record.value
    },function(data){
    if(data.ret=='OK'){
    columns1.length=0;  //清空列的数组
    columns2.length=0; //清空列的数组
    var arr=data.rows;
    $.each(arr, function(i,item){
    var year=item.YMonth;
    columns1.push({
    "field": year+'',  // 要求这里必须是 year+‘’ 将year转化为字符串
    "title": year+'',  //同理
    "halign": 'center' ,
    "colspan":3
    });
    columns2.push({
    field: 'a'+year,
    title: year,
    150,
    align: 'right',
    halign: 'center',
    formatter: function(v, r, i) {
    if(typeof v == 'undefined') {
    return '-';
    } else {
    return "<a href='#' onclick='checkNum("+year+"," + r.checkNum + ");'>" + v + "</a>";
    }
    }
    },{
    field: 'a'+year+'Num',
    title: year+'笔数',
    100,
    align: 'right',
    halign: 'center',
    formatter: function(v, r, i) {
    if(typeof v == 'undefined') {
    return '-';
    } else {
    return v;
    }
    }
    },{
    field: 'a'+year+'check',
    title: '核对',
    30,
    align: 'right',
    halign: 'center',
    formatter: function(v, r, i) {
    if(v == 0) {
    return "<img src='img/no2.png'/>";
    } else if(v == 1) {
    return "<img src='img/yes.png'/>";
    } else if(v == 2) {
    return "<img src='img/quan.png'/>";
    } else {
    return '-';
    }
    }
    });
    });
    $('#Sdatagrid').datagrid('loadData', {
    rows: [],
    ret: "OK"
    });
    $('#Sdatagrid').datagrid({
    columns:[columns1,columns2],
    url:''
    });

    }});

    }});

    html 代码:

    <div class="f14 w pr bgWhite p-5" id="Ssearch" >
        <label  >年份:</label>
        <select id="Year_Combobox" >
       <option value="2021">2021</option>
       <option value="2020">2020</option>
       <option value="2019">2019</option>
       <option value="2018">2018</option>
       <option value="2017">2017</option>
       </select>
       <a href='#' id='Slink_button' class='easyui-linkbutton fb f16 ml-25' data-options="iconCls:'icon-search'" >查询</a>
    </div>
    <table id="Sdatagrid"></table>

    需要注意两点:

    1. feild 是 year+'' 把year转化为字符串

    2. 在selelct 年份切换的时候 datagrid会自动加载,从而出错,需要设置 datagrid的url 为空,在点击查询的时候再给datagrid赋上url属性 

  • 相关阅读:
    Asp.net上传文件,过滤不符合要求格式的文件
    取得文件真正扩展名类型
    ORA12505: TNS: 监听程序当前无法识别连接描述符中所给出的 SID
    Android显示图片自适应(控件+网页)
    Android代码资源的国际化
    Eclipse下加载Android SDK源码
    Android 中Webview 自适应屏幕
    网页图片缩放(js)
    android webview 缩放及换行
    subclipse用法
  • 原文地址:https://www.cnblogs.com/wenyan/p/8118384.html
Copyright © 2020-2023  润新知