zoukankan      html  css  js  c++  java
  • 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属性 

  • 相关阅读:
    Python 对象的绑定方法
    Python 类的属性
    Python 对象与类
    Python 面向对象
    Python Subprocess模块
    Python Hashlib模块
    Python Configparser模块
    Python XML模块
    Python Re模块
    Gridview中Datakeys 通过主键取得各列的值。(转)
  • 原文地址:https://www.cnblogs.com/wenyan/p/8118384.html
Copyright © 2011-2022 走看看