欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2016年07月12日 15:42:21   作者:Srong前端小白  
這篇文章主要介紹了Extjs 點(diǎn)擊復(fù)選框在表格中增加相關(guān)信息行 的相關(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的生成器

    基于Javascript實(shí)現(xiàn)的不重復(fù)ID的生成器

    本文介紹了js生成一個不重復(fù)的ID的函數(shù)的進(jìn)化之路,具有一定的參考價值,需要的朋友一起來看下吧
    2016-12-12
  • javascript基于HTML5 canvas制作畫箭頭組件

    javascript基于HTML5 canvas制作畫箭頭組件

    該組件實(shí)現(xiàn)了根據(jù)箭頭起止點(diǎn)坐標(biāo)畫箭頭功能。目前組件可設(shè)置箭頭形狀(大小和角度)。
    2014-06-06
  • JS短信驗(yàn)證碼倒計時功能的實(shí)現(xiàn)(沒有驗(yàn)證碼,只有倒計時)

    JS短信驗(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-10
  • JavaScript實(shí)現(xiàn)一個空中避難的小游戲

    JavaScript實(shí)現(xiàn)一個空中避難的小游戲

    最近利用Javascript實(shí)現(xiàn)了一個小游戲,覺著還不錯,所以分享給大家,下面這篇文章主要給大家介紹了利用JavaScript實(shí)現(xiàn)一個空中避難的小游戲的相關(guān)資料,文中給出了完整的示例代碼供大家參考學(xué)習(xí),需要的朋友們下面來一起看看吧。
    2017-06-06
  • 微信小程序?qū)崿F(xiàn)時間選擇

    微信小程序?qū)崿F(xiàn)時間選擇

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)時間選擇,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • GoJs面板繪圖模板go.Panel使用示例詳解

    GoJs面板繪圖模板go.Panel使用示例詳解

    這篇文章主要為大家介紹了GoJs面板繪圖模板go.Panel使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04
  • 小程序?qū)崿F(xiàn)可拖動的懸浮按鈕

    小程序?qū)崿F(xiàn)可拖動的懸浮按鈕

    這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)可拖動的懸浮按鈕,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • JavaScript里實(shí)用的原生API匯總

    JavaScript里實(shí)用的原生API匯總

    這段時間翻了一番JavaScript的api,發(fā)現(xiàn)不少好的輪子,省去造的麻煩了。下面給大家匯總一下,有需要的小伙伴可以參考下。
    2015-05-05
  • js點(diǎn)擊事件鏈接的問題解決

    js點(diǎn)擊事件鏈接的問題解決

    這篇文章主要介紹了js點(diǎn)擊事件鏈接的問題解決方法,需要的朋友可以參考下
    2014-04-04
  • JS實(shí)現(xiàn)的對象去重功能示例

    JS實(shí)現(xiàn)的對象去重功能示例

    這篇文章主要介紹了JS實(shí)現(xiàn)的對象去重功能,結(jié)合實(shí)例形式分析了javascript針對json對象的遍歷、判斷、運(yùn)算實(shí)現(xiàn)去重功能相關(guān)操作技巧,需要的朋友可以參考下
    2019-06-06

最新評論