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';
}
}