在做的一個項目要用到easyUI,開始要我做數據庫設計和寫一些復雜的存儲過程等,后面寫前端的人手不夠,我又對業務熟悉對前段也相對來說熟悉一點,但對easyUI從來沒用過,於是看着API寫前段,這兩天碰到一個問題就是要級聯的加載combogrid里的數據。死活把數據加載不出來 ,在博問上也問了,oschina上也問了,元旦了,大家都過節,沒有回答,代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
</head>
<link id="others_jquery_easyui_131" rel="stylesheet" type="text/css" class="library" href="/js/sandbox/jquery-easyui/themes/default/easyui.css">
<script id="others_jquery_easyui_131" type="text/javascript" class="library" src="/js/sandbox/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function () {
$("#userreg_middle_zcrj_tb").datagrid({
width: 450,
height: 250,
rownumbers: true,
columns: [[
{ field: 'code', title: 'code', width: 100, editor: { type: 'combobox'} },
{ field: 'name', title: 'name', width: 100, editor: { type: 'combobox'} },
{ field: 'addr', title: 'addr', width: 100, editor: { type: 'text'} },
{ field: 'col4', title: '', width: 50
}
]]
});
$('#cc').combogrid({
panelWidth: 450,
value: 'name',
idField: 'code',
textField: 'name',
columns: [[{ field: 'code', title: 'Code', width: 60 },
{ field: 'name', title: 'Name', width: 100 },
{ field: 'addr', title: 'Address', width: 120 },
{ field: 'col4', title: 'Col41', width: 100}]]
});
var a = [{ code: 1, name: 'aaa', addr: 'aasdf', col4: 'asdfasdfasdf' },
{ code: 1, name: 'aaa', addr: 'aasdf', col4: 'asdfasdfasdf' },
{ code: 1, name: 'aaa', addr: 'aasdf', col4: 'asdfasdfasdf'}];
// var b = $.parseJSON(a);
$("#userreg_middle_zcrj_tb").datagrid("loadData", a);
$("#cc").combogrid("loadData", a);
});
</script>
<body>
<table id="userreg_middle_zcrj_tb"></table>
<input id="cc" name="dept" value="01"/>
</body>
</html>
最關鍵是最后兩個loadData,在datagrid中加載成功,在combogrid中加載不成功,而在文檔中寫着:
組合表格
繼承$.fn.combo.defaults和$.fn.datagrid.defaults,使用$.fn.combogrid.defaults重載默認值。
事件
事件繼承自定義組合框和數據表格。
就想當然的以為loadData唄combogrid繼承過來了。然后一直調試抓狂,今天又把combogrid的文檔看了一遍,有這樣的一個方法
| grid | none | 返回數據表格對象。 |
突然就豁然開朗了。
只需要把上面的修改成:
$("#cc").combogrid("grid").datagrid("loadData", a);
就解決了
這件事情不熟悉api導致浪費了兩天的時間,這個教訓告訴我,對於不熟悉的東西要多在文檔上找解決方法,包括前幾天datagrid編輯的問題,在官方的文檔里直接有兩個相關的例子。要重視官方文檔啊。
