首页 新闻 赞助 找找看

一个关于Jquery Easy UI datagrid的问题

0
悬赏园豆:20 [已解决问题] 解决于 2010-04-27 14:18

最近想用Jquery Easy UI 做一个后台框架,但是由于Jquery不是很熟,下面这段代码不知如何理解?我都不知道它是干什么的

formatter:function(value,rec){
       return '<span style="color:red">删除</span>';
      }

希望各位不吝赐教,小弟感激不尽

完整代码(Jquery Easy UI官方的一个demo)

代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(
function(){
$(
'#test').datagrid({
title:
'My Title',
iconCls:
'icon-save',
width:
600,
height:
350,
nowrap:
false,
striped:
true,
url:
'datagrid_data.json',
sortName:
'code',
sortOrder:
'desc',
idField:
'code',
frozenColumns:[[
{field:
'ck',checkbox:true},
{title:
'code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:
'Base Information',colspan:3},
{field:
'opt',title:'Operation',width:100,align:'center', rowspan:2,
formatter:
function(value,rec){
return '<span style="color:red">删除</span>';
}
}
],[
{field:
'name',title:'Name',width:120},
{field:
'addr',title:'Address',width:120,rowspan:2,sortable:true},
{field:
'col4',title:'Col41',width:150,rowspan:2}
]],
pagination:
true,
rownumbers:
true,
singleSelect:
false,
toolbar:[{
text:
'Add',
iconCls:
'icon-add',
handler:
function(){
alert(
'add')
}
},{
text:
'Cut',
iconCls:
'icon-cut',
disabled:
true,
handler:
function(){
alert(
'cut')
}
},
'-',{
text:
'Save',
iconCls:
'icon-save',
handler:
function(){
alert(
'save')
}
}]
});
});
function resize(){
$(
'#test').datagrid({
title:
'New Title',
striped:
true,
width:
650,
queryParams:{
p:
'param test',
name:
'My Name'
}
});
}
function getSelected(){
var selected = $('#test').datagrid('getSelected');
alert(selected.code
+":"+selected.name);
}
function getSelections(){
var ids = [];
var rows = $('#test').datagrid('getSelections');
for(var i=0;i<rows.length;i++){
ids.push(rows[i].code);
}
alert(ids.join(
':'))
}
function clearSelections(){
$(
'#test').datagrid('clearSelections');
}
function selectRow(){
$(
'#test').datagrid('selectRow',2);
}
function selectRecord(){
$(
'#test').datagrid('selectRecord','002');
}
function unselectRow(){
$(
'#test').datagrid('unselectRow',2);
}
</script>
</head>
<body>
<h1>DataGrid</h1>
<div style="margin-bottom:10px;">
<a href="#" onClick="resize()">resize</a>
<a href="#" onClick="getSelected()">getSelected</a>
<a href="#" onClick="getSelections()">getSelections</a>
<a href="#" onClick="clearSelections()">clearSelections</a>
<a href="#" onClick="selectRow()">selectRow</a>
<a href="#" onClick="selectRecord()">selectRecord</a>
<a href="#" onClick="unselectRow()">unselectRow</a>
</div>

<table id="test"></table>

</body>
</html>

 

凯尔网络的主页 凯尔网络 | 初学一级 | 园豆:159
提问于:2010-04-13 14:49
< >
分享
最佳答案
1

这一小段代码是一个回调函数,框架在创建表视图时会调用这段函数,你可以通过自定义这个函数,达到针对每行数据进行定制操作的目的。

比如,formatter:function(value,rec){  return '<a style="color:red" title="' + value + '" onclick="alert(this.title)">操作</a>';  },用来在每行创建一个可点击标签,并且在用户点击后弹出内容为各行指定 value 的消息框。

formatter 函数的各参数定义,需要你查看官方api,或者自己通过实验了解其实际类型。

收获园豆:20
陛下 | 老鸟四级 |园豆:3938 | 2010-04-13 17:20
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册