Extjs 點(diǎn)擊復(fù)選框在表格中增加相關(guān)信息行
功能效果:點(diǎn)擊復(fù)選框在表格中自動增加相關(guān)信息行,復(fù)選框取消則表格中內(nèi)容自動刪除
初始效果大概是這樣~~~~~
// 定義初始 存放表格數(shù)據(jù) var gridItems = []; //省份復(fù)選框 var $provinceCheckbox01 = new Ext.form.CheckboxGroup({ xtype: 'checkboxgroup', fieldLabel: '省份選擇', labelWidth: 60, columns: 9, vertical: true, margin: '10 0 0 15', defaults: { labelWidth: 80, width: 60, labelAlign: "left" }, items: provinceItems, //provinceItems是從其他渠道獲取的數(shù)據(jù) listeners: { change: OnChange // 復(fù)選框改變事件 } }); //表格初始數(shù)據(jù)模型 var gridPanelStore = new Ext.data.Store({ fields: ['discount', 'provinceId', 'provinceName'], data: {'items': ''}, proxy: { type: 'memory', reader: { type: 'json', root: 'items' } } }); // grid var $grid = new Ext.grid.Panel({ store: gridPanelStore, selType: 'rowmodel', singleSelect: true, margin: '20 0 0 0', columns: [{ xtype: 'rownumberer', header: '序號', width: 70, align: 'center' }, { header: '省份', width: 150, sortable: true, menuDisabled: true, align: 'center', dataIndex: 'provinceName' }, { header: '折扣', width: 100, menuDisabled: true, sortable: true, align: 'center', dataIndex: 'discount', editor: { allowBlank: false } }], dockedItems: [{ xtype: "pagingtoolbar", dock: "bottom", displayInfo: true }], plugins: [cellEditing] }); //事件監(jiān)聽 function OnChange(newValue, oldValue, eOpts) { // 清空數(shù)據(jù) gridItems = []; //選中省份ID var checkedId = this.getValue().xxx; //判斷選中數(shù)量 if(checkedId==undefined){ gridItems = []; } else if (checkedId.length == undefined) { for (var i = 0; i < provinceItems.length; i++) { if (provinceItems[i].inputValue == checkedId) { gridItems[0] = { "provinceId": checkedId, "provinceName": provinceItems[i].boxLabel, "discount": "1" }; } } }else if(checkedId.length !== undefined){ for(var j = 0;j<checkedId.length;j++){ for (var o = 0; o < provinceItems.length; o++) { if (provinceItems[o].inputValue == checkedId[j]) { gridItems[j] = { "provinceId": checkedId[j], "provinceName": provinceItems[o].boxLabel, "discount": "1" }; } } } } //console.log($gridItems); $grid.store.loadData($gridItems, false); }
類似的這種功能實(shí)際用到的可能不是很多。
做這個功能的時候,點(diǎn)擊復(fù)選框之后獲取到的數(shù)據(jù)一直放不到grid中。
最開始是想把取到的值,直接賦給 gridPanelStore.data.items ,但是賦值之后 用 store.reload() 刷新表格數(shù)據(jù)總是報錯,說是方法錯了。
我覺得(不一定對啊~),可能是因?yàn)槲业臄?shù)據(jù)模型里面套了太多層,導(dǎo)致直接從grid的store reload()才回報錯的。
最后查找API,才發(fā)現(xiàn)了loadData 可以直接給數(shù)據(jù)傳值。
我用的是Boolean值是 false。
以上所述是小編給大家介紹的Extjs 點(diǎn)擊復(fù)選框在表格中增加相關(guān)信息行,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
基于Javascript實(shí)現(xiàn)的不重復(fù)ID的生成器
本文介紹了js生成一個不重復(fù)的ID的函數(shù)的進(jìn)化之路,具有一定的參考價值,需要的朋友一起來看下吧2016-12-12javascript基于HTML5 canvas制作畫箭頭組件
該組件實(shí)現(xiàn)了根據(jù)箭頭起止點(diǎn)坐標(biāo)畫箭頭功能。目前組件可設(shè)置箭頭形狀(大小和角度)。2014-06-06JS短信驗(yàn)證碼倒計時功能的實(shí)現(xiàn)(沒有驗(yàn)證碼,只有倒計時)
最近接了個項目,其中有這樣的需求:當(dāng)用戶想要獲取驗(yàn)證碼時,就點(diǎn)擊免費(fèi)獲取驗(yàn)證碼 ,然后開始倒計時,倒計時期間按鈕文字為剩余時間x秒,且不可按狀態(tài),倒計時結(jié)束后,按鈕更改為點(diǎn)擊重新發(fā)送,下面給大家分享js短信驗(yàn)證碼倒計時實(shí)現(xiàn)代碼2016-10-10JavaScript實(shí)現(xiàn)一個空中避難的小游戲
最近利用Javascript實(shí)現(xiàn)了一個小游戲,覺著還不錯,所以分享給大家,下面這篇文章主要給大家介紹了利用JavaScript實(shí)現(xiàn)一個空中避難的小游戲的相關(guān)資料,文中給出了完整的示例代碼供大家參考學(xué)習(xí),需要的朋友們下面來一起看看吧。2017-06-06