功能優點:減少不必要的http請求,減少服務器查詢壓力,降低額外的瀏覽器渲染,提高呈現速度
開發分享: combogrid 點擊才請求的功能實現
簡要:我分析了費用系統,和現在全網的寫法.並不滿意.都是要么全部請求,要么部分請求.
費用系統中是發起了請求,然后報404錯誤(偽地址的方式實現的)這種帶來的缺陷是依舊發起了http請求,在
頁面中大量存在combogrid的話就會問題突出.
因此在新的mcp2.0中我們嘗試着首次加載10個,但這10條數據並不一定有意義,也就意味着還是浪費了帶寬.
在對比全網分析下,依舊沒有好的方案.找到官方demo一個一個查看分析.最后得出如下思路.
1.url初始化為空,直接不請求
2.在點擊下拉時候再去請求
3.鍵入空格之后再起請求.簡言之就是按需加載,多余走開.
onShowPanel: 是核心部分改造.
以下是代碼
$('#divorder').find('#CustomerID').combogrid({
panelWidth: 400,
idField: 'PartnerID',
mode: 'remote',
textField: 'PartnerNameCN',
method: 'get',
url:'',
fitColumns: true,
columns: [[
{ title: 'ID', field: 'PartnerID', hidden: true },
{ title: '中文名稱', field: 'PartnerNameCN', align: 'left', width: 300 },
{ title: '業務伙伴代碼', field: 'PartnerCode', width: 100, align: 'left' },
{ title: '聯系人', field: 'ContactPerson', align: 'left', hidden: true },
{ title: '電話', field: 'Tel', align: 'left', hidden: true },
{ title: '地址', field: 'Address', align: 'left', hidden: true },
]], onShowPanel: function () {
$('#CustomerID').combogrid('grid').datagrid('options').url = '/Master/Partner/GetPartnerListForCombox?keyValue ='+"";
$('#CustomerID').combogrid('grid').datagrid('reload');
},
});
以上是我的分享,關鍵是思路.代碼非常簡單.希望大家在新的項目中使用此方法.感謝!