最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Extjs 點(diǎn)擊復(fù)選框在表格中增加相關(guān)信息行

 更新時(shí)間:2016年07月12日 15:42:21   作者:Srong前端小白  
這篇文章主要介紹了Extjs 點(diǎn)擊復(fù)選框在表格中增加相關(guān)信息行 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下

功能效果:點(diǎn)擊復(fù)選框在表格中自動(dòng)增加相關(guān)信息行,復(fù)選框取消則表格中內(nèi)容自動(dòng)刪除

初始效果大概是這樣~~~~~

// 定義初始 存放表格數(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: '序號(hào)',
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)聽(tīng)
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í)際用到的可能不是很多。

做這個(gè)功能的時(shí)候,點(diǎn)擊復(fù)選框之后獲取到的數(shù)據(jù)一直放不到grid中。

最開(kāi)始是想把取到的值,直接賦給 gridPanelStore.data.items ,但是賦值之后 用 store.reload() 刷新表格數(shù)據(jù)總是報(bào)錯(cuò),說(shuō)是方法錯(cuò)了。

我覺(jué)得(不一定對(duì)啊~),可能是因?yàn)槲业臄?shù)據(jù)模型里面套了太多層,導(dǎo)致直接從grid的store reload()才回報(bào)錯(cuò)的。

最后查找API,才發(fā)現(xiàn)了loadData 可以直接給數(shù)據(jù)傳值。

我用的是Boolean值是 false。

以上所述是小編給大家介紹的Extjs 點(diǎn)擊復(fù)選框在表格中增加相關(guān)信息行,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 最佳的JavaScript錯(cuò)誤處理實(shí)踐

    最佳的JavaScript錯(cuò)誤處理實(shí)踐

    在JavaScript中遇到處理錯(cuò)誤很讓人頭疼,這篇文章整理了JavaScript錯(cuò)誤處理實(shí)踐,有需要的小伙伴們可以參考。
    2016-07-07
  • Javascript數(shù)組操作函數(shù)總結(jié)

    Javascript數(shù)組操作函數(shù)總結(jié)

    這篇文章主要給大家匯總介紹了Javascript數(shù)組操作函數(shù),需要的朋友可以參考下
    2015-02-02
  • 一個(gè)很酷的拖動(dòng)層的js類,兼容IE及Firefox

    一個(gè)很酷的拖動(dòng)層的js類,兼容IE及Firefox

    自己優(yōu)化修改了網(wǎng)上的一個(gè)JS拖動(dòng)類,增加了拖動(dòng)時(shí)顯示半透明的特效。
    2009-06-06
  • Bootstrap每天必學(xué)之表單

    Bootstrap每天必學(xué)之表單

    Bootstrap每天必學(xué)之表單,本文講解的就是大家最為常用的提交數(shù)據(jù)的Form表單,感興趣的小伙伴們可以參考一下
    2015-11-11
  • JavaScript 截取字符串代碼實(shí)例

    JavaScript 截取字符串代碼實(shí)例

    這篇文章主要介紹了JavaScript 截取字符串代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-09-09
  • SVG快速構(gòu)建馬賽克效果

    SVG快速構(gòu)建馬賽克效果

    這篇文章主要為大家介紹了SVG快速構(gòu)建馬賽克效果示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-06-06
  • 微信小程序?qū)崿F(xiàn)登錄界面示例

    微信小程序?qū)崿F(xiàn)登錄界面示例

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登錄界面示例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • js版掃雷游戲

    js版掃雷游戲

    這篇文章主要為大家詳細(xì)介紹了js版掃雷游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • 使用JS 插件qrcode.js生成二維碼功能

    使用JS 插件qrcode.js生成二維碼功能

    qrcode.js是一個(gè)使用比較多的js生成二維碼的插件,非常方便,接下來(lái)通過(guò)本文給大家分享使用JS 插件qrcode.js生成二維碼功能,需要的朋友參考下
    2017-02-02
  • javascript格式化指定日期對(duì)象的方法

    javascript格式化指定日期對(duì)象的方法

    這篇文章主要介紹了javascript格式化指定日期對(duì)象的方法,涉及javascript針對(duì)日期對(duì)象操作的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-04-04

最新評(píng)論

夹江县| 徐汇区| 嵊泗县| 平江县| 栖霞市| 武川县| 克拉玛依市| 安西县| 驻马店市| 本溪市| 东方市| 绥芬河市| 彝良县| 正定县| 武鸣县| 定西市| 彰武县| 连平县| 晴隆县| 黄陵县| 玉龙| 中阳县| 巴东县| 建水县| 大石桥市| 灌南县| 双辽市| 隆德县| 盈江县| 稻城县| 马尔康县| 临清市| 安丘市| 正定县| 高州市| 长葛市| 临武县| 瑞安市| 墨江| 龙口市| 大关县|