Two easyui datagrid on the one page.
The page's 'gridmaster' is successful show data, but the 'gridleft' can not do it.
I check it step by step.when I clear the gridmaster and gridleft class="easyui-datagrid".
like this:
<div id="gridleft" inline="true"></div>
<div id="gridmaster" inline="true"></div>
both of them are successful.
I don't know why?
<div id="tb" style="padding:0px;height:auto">
<div>
Code: <input id="btnum" class="easyui-textbox pagetextbox" type="text">
Name: <input id="btnname" class="easyui-textbox pagetextbox" type="text">
Status:<select id="comstatus" class="easyui-combobox" editable="false" name="state" style="width:70px;">
<option value="-1">All</option>
<option value="0">Normal</option>
<option value="1">Expire</option>
</select>
<a id="btnLoad" href="#" class="easyui-linkbutton" iconcls="icon-search" onclick="doSearchPage()">Query</a>
</div>
</div>
<div id="ptmain_layout" class="easyui-layout" data-options="fit:true" style="width:100px;height:100px;">
<div id="ptp1" data-options="region:'west',split:false" title="Function List" style="width:20%;padding:0px">
<div id="gridleft" class="easyui-datagrid" inline="true"></div>
</div>
<div id="ptp2" data-options="region:'center'" title="Detail Information">
<div id="gridmaster" class="easyui-datagrid" inline="true"></div>
</div>
</div>
<script>
$(function () {
var height1 = $(window).height();
$("#ptmain_layout").attr("style", "width:100%;height:" + height1 + "px");
$("#ptmain_layout").layout("resize", {
width: "100%",
height: height1 + "px"
});
$('#gridleft').datagrid({
title: '',
url: '/Box/PowerType/TypeReload',
method: 'get',
dataType: "json",
collapsible: true,
fit: true,
fitColumns: true,
rownumbers: true,
striped: true,
view: scrollview,
autoRowHeight: false,
remoteSort: false,
columns: [[
{ field: 'type_number', title: 'Code', hidden: true },
{ field: 'type_name', title: 'Name', width: '150px' }
]],
singleSelect: true,
onLoadSuccess: function (data2) {
if (data2.rows.length > 0) {
$(this).datagrid("selectRow", 0);
}
},
onClickRow: function (rowIndex, rowData) {
doSearchPage();
}
});
$('#gridmaster').datagrid({
title: '',
url: '/Box/PowerType/Reload',
method: 'get',
dataType: "json",
fit: true,
toolbar: '#tb',
fitColumns: true,
rownumbers: true,
striped: true,
view: scrollview,
autoRowHeight: false,
pageSize: 20,
pagination: false,
remoteSort: false,
columns: [[
{ field: 'sp_id', hidden: true, title: 'ID' },
{ field: 'sp_number', title: 'Code', width: '140px', sortable: true },
{ field: 'sp_name', title: 'Name', width: '150px', sortable: true },
{ field: 'sp_default', title: 'Default Value', width: '50px', sortable: true }
]],
queryParams: {
typenumber: '0',
number: $('#btnum').val(),
name: $('#btnname').val(),
status: $('#comstatus').combobox('getValue'),
},
singleSelect: true,
selectOnCheck: false,
checkOnSelect: false,
onLoadSuccess: function (data) {
if (data.rows.length > 0) {
$('#gridmaster').datagrid("selectRow", 0);
}
}
});
});
Poll
