关于EasyUI在Datagrid里面将某一列设置为超链接并传递当前行的某一参数传递给打开的对话框。

今天在写一个web碰到了要做一个阅读页面的需求，在datagrid里面显示每本书的信息，然后最后一列全部显示【开始阅读】。

点击以后打开一个弹出框显示书籍的内容，这就涉及到向dialog传递书本ID的问题。

先解决设置超链接的问题，以下是datagrid的代码：

$('#read1_out').datagrid({
url : 'MyReadServlet?booktype=1',
method : 'get',
loadMsg: '数据加载中......',
columns : [ [ {
field : 'BOOKID',
title : '教材编号',
width : 80,
align : 'center'
}, {
field : 'BOOKNAME',
title : '教材名称',
width : 80,
align : 'center'
}, {
field : 'COURSEID',
title : '课程编号',
width : 80,
align : 'center'
}, {
field : 'COURSENAME',
title : '课程名称',
width : 80,
align : 'center'
}, {
field : 'DISCIPLINENAME',
title : '专业名称',
width : 80,
align : 'center'
}, {
field : 'FINISH_FLAG',
title : '是否完成',
width : 40,
align : 'center'
}, {
field : 'OPER',
title : '操作',
width : 80,
align : 'center',
formatter:function(value,rowData,rowIndex){
//function里面的三个参数代表当前字段值，当前行数据对象，行号（行号从0开始）
var str = "<a href='javascript:void(0)' onclick='read_dialog('" + rowData.BOOKID + "')'>开始阅读</a>";
//return "<a href='javascript:void(0)' onclick='javascript:$('#read_start').dialog('open');'>开始阅读</a>";
return str;
}//上面的'是表示的单引号，这是html的转义表示方式。
} ] ],
onHeaderContextMenu : function(e, field) {
e.preventDefault();
if (!cmenu) {
createColumnMenu();
}
cmenu.menu('show', {
left : e.pageX,
top : e.pageY
});
}
});

注意field为OPER的那一列，添加了一个formatter函数，返回一个<a href>，其内容指向一个函数read_dialog，后面的&apos是html里面的单引号的表示方法。

rowData.BOOKID是表示取当前行记录的BOOKID这一列的数据。先来看看加上的效果：



然后来看看刚刚那个read_dialog的处理函数：

function read_dialog(bookid) {
$('#read_start').dialog({ href: 'readStart.jsp?bookid=' + bookid });
$('#read_start').dialog('open');
}

这个函数将read_start这个窗口的href的内容改成了readStart.jsp?bookid=bookid2，等于是获取到了当前行的bookid然后传递给了后面的jsp。

那边的jsp只需要这样接收即可：

<%

String str = request.getParameter("bookid");

%>