easyui datagrid

datagrid

一、基本属性

$('#list').datagrid({
                url: '/TB_Logs/GetList',
                method: 'get',
                idField: 'ID',
                fit:true,
                fitColumns: true,//自适应宽度
                singleSelect: true,//是否单选
                rownumbers: true,//行号
}）

fitColumns: true, 所有列自适应宽度，防止水平滚动。
fitHeight: true, 自适应高度 没搜到
fit=“true” fit为全屏适应 可以实现高度自适应

接口返回格式

获取选中行
单个元素:

var row = $('#tt').datagrid('getSelected');
	if (row){
		alert('Item ID:'+row.index+" Item time:"+row.time);
	}

多个元素:

  var ids = [];
		var rows = $('#tt').datagrid('getSelections');
		for(var i=0; i<rows.length; i++){
			ids.push(rows[i]); //此元素所有数据
		}

获取当前页的所有行

var index = $("#gridData").datagrid("getRows"); 
for(var i=0;i<rows.length;i++){
    index = rows[i].index;
}

二、问题

1、扩展数据表格点击加号拓展，父表格的+第一次点击，+不自动往下移 的问题
需要添加onResize，onLoadSuccess，里面添加 fixDetailRowHeight
示例：

$(function(){
           $("#RepaymentInfoTab").datagrid({
                view: detailview,
             detailFormatter:function(index,row){
                     return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>'; 
                 }, 
            onExpandRow:function(index,row){ 
                var repaymentNum = row.repaymentNum;
                $('#ddv-'+index).datagrid({ 
                    url:'getSaleInfoData?repaymentNum=' + repaymentNum, 
                    fitColumns:true, 
                    singleSelect:true, 
                    height:'auto', 
                    columns:[[ 
                       
                        {field:'salesNum1',title:'计划消费流水',width:20}, 
                        {field:'salesMoney1',title:'计划消费金额',width:20}, 
                        {field:'difference1',title:'差额（消费-还款）',width:20}, 
                        {field:'status1',title:'计划消费状态',width:20,formatter:function(value){ 
                            if (value == 1) {return '<span style=\"color:red\">初始化</span>'; } 
                            if (value == 2) {return '<span style=\"color:blue\">消费完成</span>'; } 
                            if (value == 3) {return '<span style=\"color:blue\">遗弃</span>'; } 
                        }}, 
                        {field:'transNo1',title:'交易流水号',width:20},
                        {field:'sendDate1',title:'交易时间',width:20}, 
                        {field:'creaetetime1',title:'添加时间',width:20},
                    ]], 
                    onResize:function(){  // 必须加
                        $('#RepaymentInfoTab').datagrid('fixDetailRowHeight',index); 
                    }, 
                    onLoadSuccess:function(){  // 必须加
                        setTimeout(function(){ 
                            $('#RepaymentInfoTab').datagrid('fixDetailRowHeight',index); 
                        },0); 
                    } 
                }); 
                $('#RepaymentInfoTab').datagrid('fixDetailRowHeight',index);  //必须加
            }
           })
     })
     https://blog.csdn.net/weixin_30653023/article/details/99019633

2、设置默认背景色之后,行默认的选中的背景色改变事件无效
设置一行的背景色用 rowStyler

table1.datagrid({
            rowStyler:function(index,row){
                //大于的时候，显示为黄色，100%的时候，显示为红色。
                if (row.BUSINESS_SECTOR.indexOf("小计") !=-1){
                    return 'background-color:rgb(245, 230, 233);';
                }
            },
            onSelect:function(rowIndex, rowData){

                //获取被选中行的背景色(等下取消选择的时候需要还原为这个背景色,所以这里先记录下来)
                var color = $("#datagrid-row-r2-1-"+rowIndex).css("background-color");
                if(color == 'rgb(245, 230, 233)'){ // "#FFE48D"'rgb(255, 228, 141)'颜色,即datagrid默认选中行的背景色
                    selectRowIndex = rowIndex;
                    //如果设置了自定义背景色,才需要改变(如果没有设置自定义背景色,datagrid会使用默认的选中行的背景色)
                    selectRowIndexColor[selectRowIndex] = color;
                    $("#datagrid-row-r2-1-"+rowIndex).css("background-color","#FFE48D").css("color","black");//选中改变颜色
                    $("#datagrid-row-r2-2-"+rowIndex).css("background-color","#FFE48D").css("color","black");//选中改变颜色
                }
            },
            //当行被取消选择的时候主动的改变背景色和字体颜色
            onUnselectAll:function(rows){
                var color = selectRowIndexColor[selectRowIndex];
                if(color){
                    //如果设置了自定义背景色,才需要恢复原来的自定义背景色
                    $("#datagrid-row-r2-1-"+selectRowIndex).css("background-color",color).css("color","black");//取消选中恢复颜色
                    $("#datagrid-row-r2-2-"+selectRowIndex).css("background-color",color).css("color","black");//取消选择恢复颜色
                }
                selectRowIndex = undefined;
            },
       })
       https://developer.aliyun.com/article/629065

3、设置单元格的背景色 styler

<table id="roleList">
        <thead>
          <tr>
              <th data-options="field:'ck',checkbox:true"></th>  
              <th data-options="field:'monitor_item_code',width:70,align:'center'">XXX</th>
              <th data-options="field:'gap_value',width:70,align:'center'">XXX</th>
              <th data-options="field:'remark',width:70,align:'center'">XXX</th>
              <th data-options="field:'alarm_role',width:70,align:'center',formatter:alarmRole">XXX</th>
              <th data-options="field:'flag',width:70,align:'center',formatter:flag,styler:flagColor">状态</th>
              <th data-options="field:'operate',width:80,align:'center',formatter:formatOper">操作</th>
          </tr>
         </thead>
    </table>

function flagColor(val, row, index) {
    if (val == '1') {
        return 'background:#B9F3B9';
    } else if (val == 0) {
        return 'background:#FFCCCC';
    }
}