ExtJS 드롭다운 목록 종속 연결
14301 단어 ExtJs
사실 이런 등급 연결 방식은 하나의 나무로 표시할 수 있다. 예를 들어 성은 뿌리 노드이고 다른 것은 모두 그의 아이의 방식으로 표시할 수 있다. 그러나 여기서 나는 밑에 있는 목록의 방식으로만 실현할 수 있다. 어쨌든 이런 방식을 사용할 수 있는 곳이 있고 장점이 있고 복잡하지 않다.
구현 단계는 다음과 같습니다.
먼저 JS 섹션을 살펴보겠습니다.
성 시내의 세 개의 드롭다운 목록 콤보박스 만들기
var pcombo = new Ext.form.ComboBox({
fieldLabel : ' ',
anchor: '80%',
forceSelection : true,
selectOnFocus: true,
triggerAction: 'all',
mode: 'local',
store: pdatastore,
allowBlank: true,
maxHeight:180,
valueField : 'pid',
displayField : 'pname',
applyTo : 'pcombo'
});
var ccombo = new Ext.form.ComboBox({
fieldLabel : ' ',
anchor: '80%',
forceSelection : true,
selectOnFocus: true,
triggerAction: 'all',
mode: 'local',
store: cdatastore,
allowBlank: true,
maxHeight:180,
valueField : 'cid',
displayField : 'cname',
applyTo : 'ccombo'
});
var acombo = new Ext.form.ComboBox({
fieldLabel : ' ',
anchor: '80%',
forceSelection : true,
selectOnFocus: true,
triggerAction: 'all',
mode: 'local',
store: adatastore,
allowBlank: true,
maxHeight:180,
valueField : 'aid',
displayField : 'aname',
applyTo : 'acombo'
});이렇게 하면 세 개의 등급이 연결된 comboBox를 정의합니다. 제가 여기서 실현하고자 하는 것은 데이터베이스에서 데이터를 불러오는 것입니다. 모든 정의는 데이터를 불러오는 store입니다. 다른 실현 방식은 다음과 같습니다.
//------------ ------------------
var precord=[
{name : 'pid',type : 'string'},
{name : 'pname',type : 'string'}
];
var precordHeads = Ext.data.Record.create(precord);
var pdatastore = new Ext.data.Store( {
proxy:new Ext.data.HttpProxy(new Ext.data.Connection({timeout:0,url:'./json/cascade_findProvinces.action'})),
reader : new Ext.data.JsonReader( {
root : 'provinces' // list
}, precordHeads),
remoteSort : false
});
//---------- --------------------
var crecord=[
{name : 'cid',type : 'string'},
{name : 'cname',type : 'string'},
{name : 'pid',type : 'string'}
];
var crecordHeads = Ext.data.Record.create(crecord);
var cdatastore = new Ext.data.Store( {
proxy:new Ext.data.HttpProxy(new Ext.data.Connection({timeout:0,url:'./json/cascade_findCityByPid.action'})),
reader : new Ext.data.JsonReader( {
root : 'cities' // list
}, crecordHeads),
remoteSort : false
});
//---------- --------------------
var arecord=[
{name : 'aid',type : 'string'},
{name : 'aname',type : 'string'},
{name : 'cid',type : 'string'}
];
var arecordHeads = Ext.data.Record.create(arecord);
var adatastore = new Ext.data.Store( {
proxy:new Ext.data.HttpProxy(new Ext.data.Connection({timeout:0,url:'./json/cascade_findAreaByCid.action'})),
reader : new Ext.data.JsonReader( {
root : 'areas' // list
}, arecordHeads),
remoteSort : false
});레벨 연결 밑에 있는 목록은combobox에 사용해야 하는 이벤트입니다. 첫 번째 (성) 를 클릭할 때 성의 id가 과거에 시의 데이터를 불러오기 전에 시의 데이터를 제거해야 합니다. 이렇게 하면 중복적으로 사용할 수 있습니다. 저의 구체적인 실현 방식은 다음과 같습니다.
pdatastore.load(); // store()
pcombo.on('select', function(comboBox){
//alert(comboBox.getValue());
ccombo.clearValue(); //
cdatastore.load({params:{temppid: comboBox.getValue()}});
});
ccombo.on('select', function(comboBox){
acombo.clearValue();
adatastore.load({params:{tempcid: comboBox.getValue()}});
});
acombo.on('select', function(comboBox){
alert(pcombo.getValue()+'-'+ccombo.getValue()+'-'+acombo.getValue());
//
//pcombo.clearValue();
//ccombo.clearValue();
//acombo.clearValue();
}); 여기까지 하면 하위 목록의 js 부분을 실현하지만, 페이지에 표시하려면 그를 jsp 페이지에 끼워 넣으십시오.
<body>
：<input id=pcombo type="text" />
：<input id=ccombo type="text" />
：<input id=acombo type="text" />
<!-- comboBox input -->
</body>이 페이지의 표시 부분은 이미 완성된 것이고 다음은 백그라운드의 실현 부분이다. 여기서 세 개의 POJO는 각각 성 시내이고 ID를 통해 연결된다. 구체적인 코드는 다음과 같다.
public class Province {
private String pid;
private String pname;
// get/set
}
public class Province {
private String pid;
private String pname;
// get/set
}
public class Area {
private String aid;
private String aname;
private String cid;
// get/set
}
데이터베이스 데이터를 읽는 action 부분에서 저는 원시적인 JDBC 코드를 사용하여 데이터베이스를 읽습니다. 방법이 비교적 어리석습니다. 매번 JDBC의 연결과 닫기를 켜야 합니다. 공장의 모델이나 프레임워크를 사용하지 않고 데이터를 읽기 쉽습니다. 여기는 간단한 데이터베이스 표 데이터만 읽을 뿐입니다. 저는 개인적으로 ssh나ssi 같은 것을 사용할 필요가 없다고 생각합니다. 그래서 저는 JDBC로 하겠습니다.구체적인 코드는 다음과 같습니다.
package ext.util.comboBox;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import com.opensymphony.xwork2.ActionSupport;
/**
*
* @author lizhenbin
*
*/
public class ComboCascadeAction extends ActionSupport {
private List<Province> provinces;
private List<City> cities;
private List<Area> areas;
private String temppid;
private String tempcid;
private int total;
/**
*
* @return
*/
public String findProvinces() throws Exception {
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
List<Province> plist = new ArrayList<Province>();
Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:ora10g","weibo","weibo");
stmt = conn.createStatement();
rs = stmt.executeQuery("select * from t_province");
while(rs.next()) {
Province temp = new Province();
temp.setPid(rs.getString("PID"));
temp.setPname(rs.getString("PNAME"));
plist.add(temp);
}
this.setProvinces(plist);
conn.close();
stmt.close();
rs.close();
return "success";
}
/**
* Id
* @return
* @throws Exception
*/
public String findCityByPid() throws Exception {
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
List<City> clist = new ArrayList<City>();
Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:ora10g","weibo","weibo");
stmt = conn.createStatement();
rs = stmt.executeQuery("select * from t_city where pid = "+this.temppid+"");
while(rs.next()) {
City temp = new City();
temp.setCid(rs.getString("CID"));
temp.setCname(rs.getString("CNAME"));
temp.setPid(rs.getString("PID"));
clist.add(temp);
}
this.setCities(clist);
conn.close();
stmt.close();
rs.close();
return "success";
}
/**
* Id
* @return
* @throws Exception
*/
public String findAreaByCid() throws Exception {
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
List<Area> alist = new ArrayList<Area>();
Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:ora10g","weibo","weibo");
stmt = conn.createStatement();
rs = stmt.executeQuery("select * from t_area where cid = "+this.tempcid+"");
while(rs.next()) {
Area temp = new Area();
temp.setAid(rs.getString("AID"));
temp.setAname(rs.getString("ANAME"));
temp.setCid(rs.getString("CID"));
alist.add(temp);
}
this.setAreas(alist);
conn.close();
stmt.close();
rs.close();
return "success";
}
public static void main(String[] agrs) {
ComboCascadeAction c = new ComboCascadeAction();
try {
c.findProvinces();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public List<Province> getProvinces() {
return provinces;
}
public void setProvinces(List<Province> provinces) {
this.provinces = provinces;
}
public List<City> getCities() {
return cities;
}
public void setCities(List<City> cities) {
this.cities = cities;
}
public List<Area> getAreas() {
return areas;
}
public void setAreas(List<Area> areas) {
this.areas = areas;
}
public String getTemppid() {
return temppid;
}
public void setTemppid(String temppid) {
this.temppid = temppid;
}
public String getTempcid() {
return tempcid;
}
public void setTempcid(String tempcid) {
this.tempcid = tempcid;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
}
마지막은 struts.xml의 설정입니다. 제가 데이터를 읽을 때 사용하는 것은 JsonReader이기 때문에 되돌아오는 데이터는 Json 형식이어야 합니다. 그래서 제 설정 정보는 다음과 같습니다.
<package name="weibo_json" namespace="/json" extends="json-default">
<!-- comboBox -->
<action name="cascade_*" method="{1}" class="ext.util.comboBox.ComboCascadeAction">
<result type="json"></result>
</action>
</package>아래 목록의 백그라운드 코드 구현 부분이 완성되었습니다. 다음은 데이터베이스에서 표를 만드는 것입니다. 주로 프레젠테이션이기 때문에 간단하게 만들 수 있습니다.
성표:
-- Create table
create table T_PROVINCE
(
PID VARCHAR2(20) not null,
PNAME VARCHAR2(100)
)
tablespace WEIBO_DATA
pctfree 10
initrans 1
maxtrans 255
storage
(
initial 1M
next 1M
minextents 1
maxextents unlimited
pctincrease 0
);
-- Create/Recreate primary, unique and foreign key constraints
alter table T_PROVINCE
add constraint PK_T_PROVINCE primary key (PID)
using index
tablespace WEIBO_DATA
pctfree 10
initrans 2
maxtrans 255
storage
(
initial 1M
next 1M
minextents 1
maxextents unlimited
pctincrease 0
);
시표:
-- Create table
create table T_CITY
(
CID VARCHAR2(20) not null,
CNAME VARCHAR2(100) not null,
PID VARCHAR2(20)
)
tablespace WEIBO_DATA
pctfree 10
initrans 1
maxtrans 255
storage
(
initial 1M
next 1M
minextents 1
maxextents unlimited
pctincrease 0
);
-- Create/Recreate primary, unique and foreign key constraints
alter table T_CITY
add constraint PK_T_CITY primary key (CID)
using index
tablespace WEIBO_DATA
pctfree 10
initrans 2
maxtrans 255
storage
(
initial 1M
next 1M
minextents 1
maxextents unlimited
pctincrease 0
);
섹션 테이블:
-- Create table
create table T_AREA
(
AID VARCHAR2(20) not null,
ANAME VARCHAR2(20) not null,
CID VARCHAR2(20)
)
tablespace WEIBO_DATA
pctfree 10
initrans 1
maxtrans 255
storage
(
initial 1M
next 1M
minextents 1
maxextents unlimited
pctincrease 0
);
-- Create/Recreate primary, unique and foreign key constraints
alter table T_AREA
add constraint PK_T_AID primary key (AID)
using index
tablespace WEIBO_DATA
pctfree 10
initrans 2
maxtrans 255
storage
(
initial 1M
next 1M
minextents 1
maxextents unlimited
pctincrease 0
);
여기까지 다 끝났습니다. 등급이 연결된 데이터가 필요합니다. 데이터베이스 표에 직접 넣으면 됩니다. 제 데이터베이스 버전은oracle 10g입니다. 다른 것으로 바꿀 수 있습니다. 예를 들어 mysql로 바꿀 때 데이터베이스의 연결 부분을 바꾸고 해당하는 링크 데이터 라이브러리의jar를 넣으면 됩니다. 본인의 능력이 제한되어 있습니다. 무슨 문제가 있는지 잘 부탁드립니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ExtJs:xtype의 의미내가 EXT 포럼에서 관찰한 바에 의하면 xtype를 사용할 때 의혹이 비교적 많을 것이다.심지어 어떤 사람들은 xtype를 아예 무시하거나 그것이 무엇인지 잘 모른다.그래서 나는 이 xtype의 개념을 논술하기로 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
