最新资讯当前位置:星鸿娱乐 > 最新资讯 > >

Extjs 点击复选框在表格中增加相关信息行

  

[extjs复选框]Extjs 点击复选框在表格中增加相关信息行

  

功能效果:点击复选框在表格中自动增加相关信息行,复选框取消则表格中内容自动删除  

  

  

  

初始效果大概是这样~~~~~  
  

  
  
  // 定义初始 存放表格数据  var gridItems = [];  //省份复选框  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是从其他渠道获取的数据  listeners: {  change: OnChange // 复选框改变事件  }  });  //表格初始数据模型  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]  });  //事件监听  function OnChange(newValue, oldValue, eOpts) {  // 清空数据  gridItems = [];  //选中省份ID  var checkedId = this.getValue().xxx;  //判断选中数量  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  
  

  

  

类似的这种功能实际用到的可能不是很多。

  
  

  

做这个功能的时候,点击复选框之后获取到的数据一直放不到grid中。

  
  

  

最开始是想把取到的值,直接赋给 gridPanelStore.data.items ,但是赋值之后 用 store.reload() 刷新表格数据总是报错,说是方法错了。

  
  

  

我觉得(不一定对啊~),可能是因为我的数据模型里面套了太多层,导致直接从grid的store reload()才回报错的。

  
  

  

最后查找API,才发现了loadData 可以直接给数据传值。

  
  

  

  

  

我用的是Boolean值是 false。

  
  

  

  

(责任编辑:admin)

上一篇:JQuery zClip插件实现复制页面内容到剪贴板

下一篇:JavaScript实现简单的时钟实例代码

推荐内容

客户服务热线

010-400-12345

在线客服