今天在写一个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)' οnclick='read_dialog('" + rowData.BOOKID + "')'>开始阅读</a>";
//return "<a href='javascript:void(0)' οnclick='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");
%>