Title: help for detailview-datagrid
Post by: qilicn on December 27, 2012, 08:39:09 PM
I want use detailview do more than view data (edit date etc...) first , load a html and the is code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/themes/icon.css">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.all.js"></script>
<script type="text/javascript" src="datagrid-detailview.js"></script>
<script>
$(function(){
$('#tt').datagrid({
title:'DataGrid - DetailView',
width:500,
height:250,
remoteSort:false,
singleSelect:true,
nowrap:false,
fitColumns:true,
url:'datagrid_data.json',
columns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:100,sortable:true},
{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
{field:'attr1',title:'Attribute',width:150,sortable:true},
{field:'status',title:'Status',width:60,align:'center'}
]],
view: detailview,
detailFormatter: function(rowIndex, rowData){
return '<table><tr>' +
'<td rowspan=6 style="border:0">'+
'<div class="aa" id="aa"></div></td>'+
'</tr></table>';
},
onExpandRow:function(){
$('.aa').load("menubutton.html");
$.getScript("../appjs/menu.js", null);
},
onClickRow:function(rowIndex, rowData){
$('#tt').datagrid('expandRow',rowIndex);
}
});
});
</script>
</head>
<body>
<h1>DataGrid - DetailView</h1>
<table id="tt"></table>
</body>
</html>
the load html: <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MenuButton - jQuery EasyUI Demo</title>
</head>
<body>
<h2>MenuButton</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>
MenuButton include linkbutton and menu.
When create a MenuButton you should assign a menu attribute to the linkbutton.
</div>
</div>
<div style="margin:10px 0;width:100px">
<a href="javascript:void(0)" id="dd1">Disable</a>
<a href="javascript:void(0)" id="dd2">Enable</a>
<a href="javascript:void(0)" id="dd3">3D</a>
<a href="javascript:void(0)" id="dd4">Plain</a>
</div>
<div style="background:#C9EDCC;padding:5px;width:600px;">
<a href="javascript:void(0)" id="mb1" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
<a href="javascript:void(0)" id="mb2" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help'">Help</a>
</div>
<div id="mm1" style="width:150px;">
<div data-options="iconCls:'icon-undo'">Undo</div>
<div data-options="iconCls:'icon-redo'">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div>
<span>Toolbar</span>
<div style="width:150px;">
<div>Address</div>
<div>Link</div>
<div>Navigation Toolbar</div>
<div>Bookmark Toolbar</div>
<div class="menu-sep"></div>
<div>New Toolbar...</div>
</div>
</div>
<div data-options="iconCls:'icon-remove'">Delete</div>
<div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
<div>Help</div>
<div>Update</div>
<div>About</div>
</div>
</body>
</html>
the load js: $(function(){
$('#dd1').click(function(){
$('#mb1,#mb2').menubutton({
disabled:true
});
});
$('#dd2').click(function(){
$('#mb1,#mb2').menubutton({
disabled:false
});
});
$('#dd3').click(function(){
$('#mb1,#mb2').menubutton({
plain:false
});
});
$('#dd4').click(function(){
$('#mb1,#mb2').menubutton({
plain:true
});
});
});
the question is , onExpandRow:function(){
$('.aa').load("menubutton.html");
$.getScript("../appjs/menu.js", null);
},
if i use the css selector,the html file can display onExpandRow:function(){
$('#aa').load("menubutton.html");
$.getScript("../appjs/menu.js", null);
},
if i use the id selector ,the html can not display even I use the css selector , the js file can not parse correctly anyone can help me with this issue?
Title: Re: help for detailview-datagrid
Post by: stworthy on December 28, 2012, 12:43:27 AM
When using id selector, the id value must be unique on whole page. In your case above, using class selector is a better choice. Some additional code snippets must be added into your 'onExpandRow' event handler. onExpandRow:function(index){
var target = this;
var rowDetail = $(target).datagrid('getRowDetail',index);
var aa = rowDetail.find('.aa');
aa.load("menubutton.html",function(){
$.parser.parse(rowDetail);
$(target).datagrid('fixDetailRowHeight',index);
$.getScript("menu.js",null);
});
}
|