extjs 多行数据 省市级联的控制

extjsextjsonjava

解决方案 »

  1.   

    数据源store是一样的，所以会这样，这里变了，那里也变，
    我的建议是，城市也要绑定一个id,绑定省的id，做判断用。
    不知可行.
      

  2.   

        绑定省id？ 怎么判断？   数据源一样 如果我不怕麻烦 把数据源设置不一样，每个省里面的市都分开查，再去判断哪个省，显示相应的store  市 不知可取不~   就是要写很多查询 哎 
      

  3.   

    你的代码里面都没看出来哪里有联动控制，
    参考: ExtJs 省市级联选择代码
    看上面链接代码的第16-24行，联动的时候添加一个change的listener，这样在选择框选择改变的时候，自动改变下级选择框的内容。
      

  4.   

    I不怕麻烦的话，就多个查询吧，只要多写几个store就行了    绑定省id？ 怎么判断？   数据源一样 如果我不怕麻烦 把数据源设置不一样，每个省里面的市都分开查，再去判断哪个省，显示相应的store  市 不知可取不~   就是要写很多查询 哎 
      

  5.   

    js省市级联菜单控制
    <SCRIPT language=javascript src="Jsl/city.js"></SCRIPT>
    <script language="JavaScript">
    </script>//引入js文件
    <select onChange="selectcityarea('Province','City','form1');" name=Province>
              <option value=0 selected>-请选择-</option>//设置显示省级信息
    <SELECT name="City"><OPTION value=0 selected>-请选择-</OPTION></SELECT>//设置显示市级信息
    //city.js文件代码
    cityareaname=new Array(35);
    cityareacode=new Array(35);
     function first(preP,preC,formname,selectP,selectC)
       {
         a=0;
    if (selectP=='北京')
      { a=1;tempoption=new Option('北京','北京',false,true); }
    else
      { tempoption=new Option('北京','北京'); }
    eval('document.'+formname+'.'+preP+'.options[1]=tempoption;');
    cityareacode[0]=new Array('0101','0102','0103','0104','0105','0106','0107','0108');
    cityareaname[0]=new Array('东城区','西城区','崇文区','宣武区','朝阳区','海淀区','丰台区','石景山');
    if (selectP=='深圳')
      { a=2;tempoption=new Option('深圳','深圳',false,true); }
    else
      { tempoption=new Option('深圳','深圳'); }
    eval('document.'+formname+'.'+preP+'.options[2]=tempoption;');
    cityareacode[1]=new Array('0201','0202','0203','0204','0205','0206');
    cityareaname[1]=new Array('罗湖','福田','南山','盐田','宝安','龙岗');
    if (selectP=='上海')
      { a=3;tempoption=new Option('上海','上海',false,true); }
    else
      { tempoption=new Option('上海','上海'); }
    eval('document.'+formname+'.'+preP+'.options[3]=tempoption;');
    cityareacode[2]=new Array('0301','0302','0303','0304','0305','0306','0307','0308','0309','0310','0311','0312','0313','0314','0315','0316','0317','0318','0319','0320');
    cityareaname[2]=new Array('宝山','金山','南市','长宁','静安','青浦','崇明','卢湾','松江','奉贤','浦东','杨浦','虹口','普陀','闸北','黄浦','闵行','徐汇','嘉定','南汇');
    //以下您自己按照格式添加。
    if (selectP=='台湾')
      { a=35;tempoption=new Option('台湾','台湾',false,true); }
    else
      { tempoption=new Option('台湾','台湾'); }
    eval('document.'+formname+'.'+preP+'.options[35]=tempoption;');
    cityareacode[34]=new Array('3502','3503','3504','3505','3506','3507','3508');
    cityareaname[34]=new Array("台北","高雄","台中","新竹","台南","台东","澎湖","花莲");eval('document.'+formname+'.'+preP+'.options[a].selected=true;');//cityid=selectP;
    cityid=a;
        if (cityid!='0')
          {
            b=0;for (i=0;i<cityareaname[cityid-1].length;i++)
               {
                 if (selectC==cityareaname[cityid-1][i])
                     {b=i+1;tempoption=new Option(cityareaname[cityid-1][i],cityareaname[cityid-1][i],false,true);}
                 else
                     tempoption=new Option(cityareaname[cityid-1][i],cityareaname[cityid-1][i]);
                eval('document.'+formname+'.'+preC+'.options[i+1]=tempoption;');
               }
            eval('document.'+formname+'.'+preC+'.options[b].selected=true;');
          }//codego.net/tags/3/1/
        }
    //修改版不用城市代码，直接用城市名称
     function selectcityarea(preP,preC,formname)
       {
         cityid=eval('document.'+formname+'.'+preP+'.selectedIndex;');
         j=eval('document.'+formname+'.'+preC+'.length;');
         for (i=1;i<j;i++)
            {eval('document.'+formname+'.'+preC+'.options[j-i]=null;')}
         if (cityid!="0")
           {
             for (i=0;i<cityareaname[cityid-1].length;i++)
                {
                 tempoption=new Option(cityareaname[cityid-1][i],cityareaname[cityid-1][i]);
                 eval('document.'+formname+'.'+preC+'.options[i+1]=tempoption;');
                }
           }
        }//祝您成功！
      

  6.   

    你这个是在Grid里面的联级吧？我觉得你的代码里面城市列中的params: {provinceCode: provinceCode}，你的prvoinceCode是全局的吗？每一行的参数虽然都是省的代码，但其实是每一行自己的省的代码，所以应该通过rowIndex和colIndex之类的来确定当前行的provinceCode的参数值，而不是用全局的provinceCode变量。
    不知道有没有说清楚
      

  7.   

    而且一般情况下，在显示的时候，都是一个单元格显示一个值，直接从数据库或数据源读取，Combo一般是绑定单元格的editor。不知道是不是因为你有特殊需求才这样做。
    参考: linked comboboxes in an editable gridExt.onReady(function(){    Ext.BLANK_IMAGE_URL = './javascript/ext-2.2/resources/images/default/s.gif';    var etData = [
            ['DM','Developed Markets'],
            ['EM','Emerging Markets'],
            ['OT','Other']
        ];
        
        var regionData = [
            ['DM','AS','Asia'],
            ['DM','EU','Europe'],
            ['DM','NA','North America'],
            ['EM','AP','Asia Pacific'],
            ['EM','ME','Europe, Middle East, Africa'],
            ['EM','LA','Latin America'],
            ['OT','OT','Other']
        ];    var countryData = [
            ['AP','CN','China'],          ['AP','IN','India'],          ['AP','ID','Indonesia'],
            ['AP','KO','Korea'],          ['AP','MY','Malaysia'],       ['AP','PK','Pakistan'],
            ['AP','PH','Philippines'],    ['AP','TA','Taiwan'],         ['AP','TH','Thailand'],
            ['AS','HK','Hong Kong'],      ['AS','JP','Japan'],          ['AS','SG','Singapore'],
            ['EU','AS','Austria'],        ['EU','BE','Belgium'],        ['EU','DE','Den'],
            ['EU','FN','Finland'],        ['EU','FR','France'],         ['EU','GE','Germany'],
            ['EU','GR','Greece'],         ['EU','IR','Ireland'],        ['EU','IT','Italy'],
            ['EU','NE','Netherlands'],    ['EU','NO','Norway'],         ['EU','PG','Portugal'],
            ['EU','SP','Spain'],          ['EU','SW','Sweden'],         ['EU','SZ','Switzerland'],
            ['EU','UK','United Kingdom'], ['LA','AR','Argentina'],      ['LA','BR','Brazil'],
            ['LA','CH','Chile'],          ['LA','CO','Colombia'],       ['LA','MX','Mexico'],
            ['LA','PE','Peru'],           ['ME','CZ','Czech Republic'], ['ME','EG','Egypt'],
            ['ME','HU','Hungary'],        ['ME','IS','Israel'],         ['ME','JD','Jordan'],
            ['ME','MO','Morocco'],        ['ME','PO','Poland'],         ['ME','RU','Russia'],
            ['ME','SA','South Africa'],   ['ME','TU','Turkey'],         ['NA','CA','Canada'],
            ['NA','US','United States'],  ['OT','OT','Other']
        ];
        
        var geoData = [
            ['DM','AS','HK',47.2],
            ['EM','AP','PH',31.1],
            ['EM','LA','MX',11.2],
            ['OT','OT','OT',7.5]
        ];    var geoRecord = Ext.data.Record.create([
             {name: 'etCode',  type: 'string'}
            ,{name: 'regionCode',  type: 'string'}
            ,{name: 'countryCode', type: 'string'}
            ,{name: 'amount',      type: 'float'}
        ]);
        
        var mktStore = new Ext.data.SimpleStore({
             autoLoad: true
            ,data: etData
            ,id: 0
            ,fields: [
                 {name: 'etCode', type: 'string'}
                ,{name: 'etDesc', type: 'string'}
            ]
        });    var regStore = new Ext.data.SimpleStore({
             autoLoad: true
            ,data: regionData
            ,id: 1
            ,fields: [
                 {name: 'etCode', type: 'string'}
                ,{name: 'regionCode', type: 'string'}
                ,{name: 'regionDesc', type: 'string'}
            ]
        });
        
        var ctryStore = new Ext.data.SimpleStore({
             autoLoad: true
            ,data: countryData
            ,id: 1
            ,fields: [
                 {name: 'regionCode', type: 'string'}
                ,{name: 'countryCode', type: 'string'}
                ,{name: 'countryDesc', type: 'string'}
            ]
        });
        
        var geoStore = new Ext.data.Store({
            reader: new Ext.data.ArrayReader({},geoRecord)
        });    var geoSModel = new Ext.grid.RowSelectionModel();
        
        var geoGrid = new Ext.grid.EditorGridPanel({
            id: 'geoGrid'
            ,width: 500
            ,height: 300
            ,style:'padding:10px'
            ,store: geoStore
            ,loadMask : {msg: 'Retrieving Geographic data...'}
            ,clicksToEdit:1
            ,sm: geoSModel
            ,renderTo: 'geoTestDiv'
            ,columns: [{
                    header: 'Market'
                    ,width: 150
                    ,dataIndex: 'etCode'
                    ,sortable: true
                    ,editor: new Ext.form.ComboBox({
                        store: mktStore
                        ,displayField:'etDesc'
                        ,valueField:'etCode'
                        ,typeAhead: true
                        ,triggerAction: 'all'
                        ,mode: 'local'
                        ,emptyText:'Select a et...'
                        ,editable: false
                    })
                    ,renderer: function(val) {
                        mktStore.clearFilter();
                        return val != '' ? mktStore.getById(val).get('etDesc') : 'Select a et...';
                    }
                },{
                    header: 'Region'
                    ,width: 150
                    ,dataIndex: 'regionCode'
                    ,sortable: true
                    ,editor: new Ext.form.ComboBox({
                        store: regStore
                        ,displayField:'regionDesc'
                        ,valueField:'regionCode'
                        ,typeAhead: true
                        ,triggerAction: 'all'
                        ,mode: 'local'
                        ,emptyText:'Select a region...'
                        ,editable: false
                        ,lastQuery:''
                    })
                    ,renderer: function(val) {
                        regStore.clearFilter();
                        return val != '' ? regStore.getById(val).get('regionDesc') : 'Select a region...';
                    }
                },{
                    header: 'Country'
                    ,width: 150
                    ,dataIndex: 'countryCode'
                    ,sortable: true
                    ,editor: new Ext.form.ComboBox({
                        store: ctryStore
                        ,displayField:'countryDesc'
                        ,valueField:'countryCode'
                        ,typeAhead: true
                        ,triggerAction: 'all'
                        ,mode: 'local'
                        ,emptyText:'Select a country...'
                        ,editable: false
                        ,lastQuery:''
                    })
                    ,renderer: function(val) {
                        ctryStore.clearFilter();
                        return val != '' ? ctryStore.getById(val).get('countryDesc') : 'Select a country...';
                    }
                },{
                    header: 'Amount'
                    ,dataIndex: 'amount'
                    ,sortable: true
                    ,editor: new Ext.form.NumberField()
                }
            ]
            ,view: new Ext.grid.GridView({
                forceFit: true
                ,emptyText: 'No geographic data to display.'
            })
            ,autoHeight: true
            ,tbar: [{
                     text: 'Add'
                    ,icon: './images/add.gif'
                    ,iconCls: 'x-btn-text-icon' // use 'x-btn-icon' for buttons with icons only
                    ,handler: function() {
                        var m = new geoRecord({
                             etCode: ''
                            ,regionCode: ''
                            ,countryCode: ''
                            ,amount: 0.00
                        });
                        alert('adding new geo record...');
                        geoGrid.stopEditing();
                        geoStore.insert(0, m);
                        geoGrid.startEditing(0, 0);
                    }
                },'-',{
                    text: 'Refresh'
                    ,icon: './javascript/ext-2.2/resources/images/default/grid/refresh.gif'
                    ,iconCls: 'x-btn-text-icon'
                    ,handler: function() {
                        geoStore.loadData(geoData);
                    }
                }]
        });
            
        geoGrid.on( 'beforeedit', function( e ) {
            
            if ( e.field == 'regionCode' ) {    //use field as column might change if the user reorders the columns
                regStore.clearFilter();
                regStore.filter( 'etCode', e.record.get( 'etCode' ) );        } else if ( e.field == 'countryCode' ) {
                ctryStore.clearFilter();
                ctryStore.filter( 'regionCode', e.record.get( 'regionCode' ) );
            }
        }, geoGrid );        geoGrid.on( 'afteredit', function( e ) {
            
            if( e.field == 'etCode' ) { //editing et column
                regStore.clearFilter();     //make sure you can see all region data
                
                // the new etCode doesn't match the etCode for the selected region
                if( e.value != regStore.getById( e.record.get('regionCode') ).get( 'etCode' ) ) {
                   e.record.set( 'regionCode', '' );
                   e.record.set( 'countryCode', '' );
                }
            } else if( e.field == 'regionCode' ) {
                ctryStore.clearFilter();
                
                if( e.value != ctryStore.getById( e.record.get('countryCode') ).get( 'regionCode' ) ) {
                   e.record.set( 'countryCode', '' );   
                }
            }
        }, geoGrid );        geoStore.loadData(geoData);
    });
      

  8.   

    那个provinceCode是全局的  选择省后就把这个provinceCode赋值了    怎么来确定当前行的provinceCode的参数值？
      

  9.   

       其实我那个是读取的.csv的文件   所以不一定有几行数据  
      

  10.   

    http://blog.csdn.net/olinbsoft/article/details/19343377