EasyUI 的 formatter事件的函数的使用
<body style="visibility: visible;"> <table id="menuview" idField="menuId" rownumbers="true" pagination="true" fitColumns="true" singleSelect="false" pageSize="15" pageList="[15,30,45,60]" toolbar="#tb" url="${pageContext.request.contextPath }/menu/list.action" > <thead> <tr> <th field="menuId" width="50" align="center" checkbox="true"></th> <th field="name" width="80" align="center" >按钮名称</th> <th field="actionURL" width="80" align="center" >按钮URL</th> <th field="parentMenu" width="80" align="center" >上级按钮</th> <th field="modify" align="center" width="50" formatter="rowFormater" align="center">操作</th> </tr> </thead> </table> <div id="tb"> <a href="${pageContext.request.contextPath }/menu/addMenu.jsp" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:delData();">删除</a> </div> </body>
function rowFormater(value, row, index) { return '<a href="javascript:void(0)" onclick="showMessageDialog('+ row.menuId+');">设置</a>'; } //url：窗口调用地址，title：窗口标题，width：宽度，height：高度，shadow：是否显示背景阴影罩层 function showMessageDialog(id) { url="${ctx}/menu/menuManage.jsp?id="+id; title="设置"; shadow=true; var content = '<iframe id="menuAdminManage" src="' + url + '" width="100%" height="99%" frameborder="0" scrolling="no"></iframe>'; var boarddiv = '<div id="msgwindow" title="' + title + '"></div>'; //style="overflow:hidden;"可以去掉滚动条 $(document.body).append(boarddiv); var win = $('#msgwindow').dialog({ content: content, width: "700px", height: "500px", modal: shadow, title: title, onClose: function () { $(this).dialog('destroy');//后面可以关闭后的事件 } }); win.dialog('open'); }
iframe的传值问题的解决
function geturl(name) { var reg = new RegExp("[^\?&]?" + encodeURI(name) + "=[^&]+"); var arr = window.parent.document.getElementById("menuAdminManage").contentWindow.location.search.match(reg); if (arr != null) { return decodeURI(arr[0].substring(arr[0].search("=") + 1)); } return ""; }
根据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。
