var url = '你的数据源'
getData(url)
})
function getData(url){
$("#test").datagrid({
loadMsg:'数据加载中....',
title:'项目评审情况一览表',
iconCls:'icon-edit',
width:800,
//height:100,
url:url,
nowrap: false,
striped: true,
collapsible:true,
sortName: 'id',
sortOrder: 'asc',
remoteSort: false,
pagination:true,
rownumbers:true,
fit:true, //自适应大小
fitColumns:false,
autoScroll : true,
singleSelect:true,
frozenColumns:[[
{title:'编号',field:'id',width:50,sortable:true,align:'center'}
]],
columns:[[
{title:'基本信息',colspan:6},
{field:'_operate', title:' *** 作',width:60,align:'center', rowspan:2,
formatter:formatOper
},
{field:'assofile', title:'下载',width:60,align:'center', rowspan:2,
formatter:formatDownload
}
],[
{field:'projectName',title:'项目名称',width:100,align:'center'},
{field:'projectType',title:'选题类型',width:100,align:'center'},
]],
})
//查看详情
function formatOper(val,row,index){
return '<a href="#" onclick="reviewProject('+index+')">评审</a>'
}
function formatDownload(val,row,index){
var url = "${ctx}" + val
var returnString = '<a href='+url+'>下载</a>'
return returnString
}
其实就是指定列的format，formatOper(val,row,index)中的三个参数，你自己alert一下，就明白了
第一步，我需要 在datagrid行里添加一列，field指向id（field:'id'），然后对这列进行格式化处理（formater：格式化函数），如下：<th data-options="field:'id',width:180,formatter: rowformater"> *** 作</th>
复制代码
第二步：
根据documentation的描述，formatter的格式化函数有3个parameters，分别是：
value: the field value，也就是field:'id'。
rowData: the row record data。就是这一行的Json数据，包括你已经选择在Datagrid上显示的内容，和没显示的内容。因为我的Json数据里包括了Id这一内容，所以我可以直接调用。如果你作为数据源的Json里没有Id属性，需要修改一下Json的输出。我的每行Json输出是类似{"id":"1","name":"\u7ecf\u6d4e\u53d1\u5c55","parentId":"0"}的结构
rowIndex: the row index.当前行的Index。
所以我写rowformater这个函数的时候，也需要用function rowformater(value,row,index)的方法。为了看起来清晰明白，我只在函数里写了一句话（放在<head>标签里），事实上项目上需要做一些基本的判断。：
<script type="text/javascript">
function rowformater(value,row,index)
{
return "<a href='"+row.id+"' target='_blank'> *** 作</a>"
}
</script>
复制代码
OK，应该能跑起来了。跑出的结果就是上面的截图样式。
注意：自己做了以后发现，如果UI中一行的多个列需要用到数据源中的同一列，那么可能会有问题，需要把这UI中的多个列并到同一列中，共同使用数据源中的这同一列。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）