Extjs grid obtains dynamic columns from JSON

Source: Internet
Author: User

// Js File

Function ready (){
// Declare function variables
Var data;
Var quan = null;
// Add columns dynamically. This is the key code.
Var addColumn = function (){
This. fields = ''; // defines a field.
This. columns = ''; // defines the column
This. addColumns = function (name, caption, ishidden) // name: column_name
// Caption
// Comments;
{
If (this. fields. length> 0 ){
This. fields + = ',';
}
If (this. columns. length> 0 ){
This. columns + = ',';
}
This. fields + = "{name: '" + name + "', mapping: '" + name + "'}";
This. Columns + = '{header: "' + caption + '", dataindex: "' + name
+ '", Width: 100, sortable: True, hidden:' + ishidden + '}';
};
};
// Retrieve the column from the server and add it to columnmodel dynamically

Ext. Ajax. Request ({
URL: "getcyrycolumn ",
Success: function (response, option ){
If (response. responsetext = ""){
Return;
}
Data = new AddColumn (); // The current object is Data
VaR res = ext. util. JSON. Decode (response. responsetext );
For (VAR I = 0; I <res. length; I ++ ){
Var p = res [I];
If (p [0] = 'C _ id '){
Data. addColumns (p [0], p [1], true );
} Else {
Data. addColumns (p [0], p [1], false); // For example, p [0] indicates
// Userid
}
}
// Dynamically generate GridPanel
MakeGrid ();
},
Failure: function (){
Ext. Msg. alert ("message", "initialization data error ");
}
});
// Dynamically generate GridPanel

Var makeGrid = function (){
Var cm = new Ext. grid. ColumnModel (eval ('([' + data. columns + '])');
Cm. defaultSortable = true; // columns can be sorted.
Var fields = eval ('([' + data. fields + '])');
Var newStore = new Ext. data. Store ({
Proxy: new Ext. data. HttpProxy ({
Url: "getCyryData"
}),
Reader: new Ext. data. JsonReader ({
TotalProperty: "total ",
Root: "rows ",
Fields: fields
})
// Read the total number of data entries, objects, fields, etc.
});

Newstore. Load ({
Params :{
Start: 0,
Limit: 9
}
});
VaR pagingbar = new Ext. pagingtoolbar ({
Displayinfo: True,
Emptymsg: "No data display ",
Displaymsg: "displays {2} data records from {0} to {1} data records ",
Store: newstore,
Pagesize: 9
});
VaR gridpanel = new Ext. Grid. editorgridpanel ({
Title: "dynamically generating columnmodel ",
CM: cm,
Id: "grid_panel ",
// RenderTo: "id ",
Store: newStore,
Frame: true,
Border: true,
Layout: "fit ",
PageSize: 16,
AutoWidth: true,
Sm: new Ext. grid. RowSelectionModel ({
SingleSelect: true
}),
Height: 300,
Width: '200 ',
ViewConfig :{
ForceFit: true
},
Bbar: pagingBar
});

Var cb = new Ext. grid. RowSelectionModel ({
SingleSelect: true
// If the value is false, multiple rows can be selected; otherwise, only one row can be selected.
});

GridPanel. addListener ('rowclick', rowclickFn );
Function rowclickFn (grid, rowindex, e ){

Var store = Ext. getCmp ("grid_panel"). getStore ();

For (var I = 0, len = store. data. length; I <len; I ++ ){
Var data = store. getAt (rowindex). data; // data is an object corresponding to a record.
Quan = data ["c_id"];
Break;
}
}

// From Form
// ID card verification
Ext. Form. vtypes ['cardidyanval'] =/^ (\ D {15}) $ | ^ (\ D {17} [\ dxx] {1}) $ /;
Ext. Form. vtypes ['cardidyanmask'] = //;
Ext. Form. vtypes ['cardidyantext'] = 'your income is incorrect! ';
Ext. Form. vtypes ['cardidyany'] = function (v ){
Return Ext. Form. vtypes ['cardidyanval']. Test (v );
};
// Phone Verification

Ext. form. vtypes ['telyanval'] =/^ (0 \ D {2, 3})-) (\ D {7, 8}) (-(\ D {3 ,}))? $ /;
Ext. Form. vtypes ['telyantext'] = 'your income is incorrect! ';
Ext. Form. vtypes ['telany'] = function (v ){
Return Ext. Form. vtypes ['telyanval']. Test (v );
};
Form1 = new Ext. formpanel ({
Frame: true,
Title: "query ",
Width: 800,
AutoHeight: true,
FileUpload: true,
Frame: true,
Layout: "form", // The entire large form is form layout
LabelAlign: "right ",
Items :[{
Layout: "column ",
Items :[{
ColumnWidth:. 3,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
Fieldlabel: 'unit sequence number ',
Width: 120,
Name: "dwid"
}]

},{
Columnwidth:. 3,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
Name: 'job ',
FieldLabel: 'job ',
Width: 120
}]

},{
ColumnWidth:. 3,
Layout: "form ",
Items :[{

Xtype: 'textfield ',
Name: 'pname ',
FieldLabel: 'name ',
Width: 120
}]

}]
},{
Layout: "column ",
Items :[{
ColumnWidth:. 3,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
FieldLabel: 'id card No ',
Width: 120,
Name: "cardid ",
Vtype: 'cardidyany'
}]

},{
ColumnWidth:. 3,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
Name: 'tel ',
FieldLabel: 'landline phone ',
Width: 120,
Vtype: 'telany'
}]

},{
ColumnWidth:. 3,
Layout: "form ",
Items :[{
Xtype: 'datefield ',
FieldLabel: 'onboarding time ',
Name: "ruzhitime ",
Width: 120,
Format: 'Y-m-d ',
Editable: false

}]

}]
},{
Layout: "column ",
Items :[{
ColumnWidth:. 3,
Layout: "form ",
Items :[{
Xtype: 'datefield ',
Fieldlabel: 'departure time ',
Name: "lizhitime ",
Width: 120,
Format: 'Y-m-d ',
Editable: false
}]

}]
},{
Buttons :[{
Text: "details ",
Handler: function (){
Detail (quan );
}
},{
Text: "modify ",
Handler: function (){
Xiugai (quan );
}
},{
Text: "query ",
Handler: function (){

Var data1 = form1.getForm (). getValues (); // The result here is the direct volume of objects such as {foo: 123, bar: 'aaa'} (literal
// Object)
NewStore. baseParams = data1;
NewStore. load ();

}
},{
Text: "reset ",
Handler: function (){
Form1.getForm (). reset ();
}
}]
}, GridPanel]
});

Var window = new Ext. Window ({
Title: 'resize me ',
Width: 800,
Height: 500,
MinWidth: 300,
MinHeight: 200,
Layout: 'fit ',
Minimizable: true,
Maximizable: true,
Plain: true,
BodyStyle: 'padding: 5px ;',
ButtonAlign: 'center ',
Items: form1
});

Window. show ();
};
}
Ext. onReady (ready );

// Action Method

Map <String, Object> datalist = new HashMap <String, Object> ();
@ JSON
Public Map <String, Object> getDatalist (){
Return datalist;
}
@ JSON
Public void setDatalist (Map <String, Object> datalist ){
This. datalist = datalist;
}

// Obtain the header

@ Action (value = "getCyryColumn", results = {
@ Result (name = "success", location = "/servlet/UserServlet "),
@ Result (name = "failure", location = "/index. jsp ")
})
Public String getCyryColumn () throws Exception {
List <Object []> list = cyrytableService. getCyryColumn ();
ObjectMapper ob = new ObjectMapper ();
Message = ob. writeValueAsString (list). toLowerCase ();
Request. setAttribute ("msgg", message );
Return "success ";
}
 
// Obtain table data
@ Action (value = "getCyryData", results = {
@ Result (type = "json", name = "success", params = {"root", "datalist "}),
@ Result (name = "failure", location = "/index. jsp ")
})
Public String getCyryData (){
DateFormat format = new SimpleDateFormat ("MM/dd/yyyy ");
Format. setLenient (false );
String dwid = request. getParameter ("dwid ");
String job = request. getParameter ("job ");
String pname = request. getParameter ("pname ");
String cardid = request. getParameter ("cardid ");
String tel = request. getParameter ("tel ");
String ruzhitime1 = request. getParameter ("ruzhitime ");
String lizhitime1 = request. getParameter ("lizhitime ");

If (ruzhitime1 = null | ruzhitime1.equals ("")){
Ruzhitime1 = "";
} Else {
Try {

RuzhitimeSe = new Timestamp (format. parse (ruzhitime1). getTime ());

} Catch (ParseException e1 ){
E1.printStackTrace ();
}
}
If (ruzhitime1 = null | ruzhitime1.equals ("")){
Ruzhitime1 = "";
} Else {
Try {

LizhitimeSe = new Timestamp (format. parse (ruzhitime1). getTime ());

} Catch (ParseException e1 ){
E1.printStackTrace ();
}
}
ObjectMapper ob = new ObjectMapper ();
Try {
Rows = new ArrayList <Object []> ();
Rows = cyrytableService. getCyryData (1, 10, dwid, job, pname, cardid, tel, ruzhitime, lizhitime );
Datalist. put ("rows", rows );
Total = "10 ";
Success = true;
} Catch (Exception e ){
E. printStackTrace ();
}
Return "success ";
}

// Service method

Private String shql;
Private StringBuffer hql;

Public List <Object []> getCyryColumn () throws Exception {
Hql = new StringBuffer ("select new map (c. id as id, c. dwid as dwid, c. job as job, c. pname as pname, c. byname as byname, c. cardid as cardid, "+
"C. sex as sex, c. birthday as birthday, c. phone as phone, c. qq as qq, c. address as address, c. adddetail as adddetail, c. email as email, "+
"C. tel as tel, c. otherzj as otherzj, c. othercon as othercon, c. photo as photo, c. detail as detail, c. iiperson as iiperson," +
"C. idepname as idepname, c. itime as itime, c. ruzhitime as ruzhitime, c. lizhitime as lizhitime) from Bhcyrytable as c where 1 = 1 ");
Shql = hql. toString ();
Return cyrytableDao. GetColData (shql );
}

// Fuzzy search

Public List <Object []> getCyryData (final int currentPage,
Final int rows, String dwid, String job, String pname, String cardid,
String tel, Timestamp ruzhitime, Timestamp lizhitime) throws Exception {
List <Object> List = new arraylist <Object> ();
If (dwid! = NULL &&! Dwid. Equals ("")){
Hql. append ("and C. dwid like? ");
List. Add ("%" + dwid + "% ");
}
If (job! = NULL &&! Job. Equals ("")){
Hql. append ("and C. job like? ");
List. Add ("%" + job + "% ");
}
If (pname! = NULL &&! Pname. Equals ("")){
Hql. append ("and C. pname like? ");
List. Add ("%" + pname + "% ");
}
If (cardid! = NULL &&! Cardid. Equals ("")){
Hql. append ("and C. cardid like? ");
List. Add ("%" + cardid + "% ");
}
If (tel! = NULL &&! Tel. Equals ("")){
Hql. append ("and C. Tel like? ");
List. Add ("%" + Tel + "% ");
}
If (ruzhitime! = NULL &&! Ruzhitime. Equals ("")){
Hql. append ("and C. ruzhitime >=? ");
List. Add (ruzhitime );
}
If (lizhitime! = NULL &&! Lizhitime. Equals ("")){
Hql. append ("and C. lizhitime <=? ");
List. Add (lizhitime );
}
Shql = hql. tostring ();
Int inde = hql. lastindexof ("1 = 1 ");
Hql. Replace (INDE, hql. Length (),"");
Hql. append ("1 = 1 ");
Return cyrytabledao. findbyhql (shql, currentpage, rows, list. toarray ());
}

// Dao Layer Method

@ Suppresswarnings ("unchecked ")
Public list <object []> findbyhql (string hql) throws exception {
List <object []> List = NULL;
Session session = NULL;
Try {
Session = sessionFactory. openSession ();
Session. beginTransaction ();
// Data permission Filtering
/* Hql = QxFilter (hql );
If (hql. equals ("")){

Return null;
}*/

Query query = session. createQuery (hql );
List = query. list ();
Session. getTransaction (). commit ();

} Catch (Exception e ){
E. printStackTrace ();
} Finally {
Session. close ();
}
Return list;
}

 

 

 

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.