Today, I read an article on the extjs framework-based advanced B/S query interface on the csdn blog.Article, I feel that the effect is good. I want to forward it to anyone who needs it.
You can dynamically add multiple query conditions and define logical relationships. You can enter integer, floating point, String, date, Boolean value, and custom selection list using Ext. data. jsonstore can easily interact with servers.
Sample:
Example:
<Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML> <Meta name = "author" contect = "Peng Guohui">
<Meta name = "keywords" content = "Advanced query interface"/>
<Meta name = "Description" content = "http://blog.csdn.net/nhconch"/>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf8">
<LINK rel = "stylesheet" type = "text/CSS" href = "Resources/CSS/ext-all.css">
<SCRIPT type = "text/JavaScript" src = "adapter/EXT/ext-base.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "ext-all.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "Source/locale/ext-lang-zh_CN.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
Ext. blank_image_url = 'resources/images/default/s.gif ';
Ext. onready (function (){
VaR dspq = new Ext. Data. jsonstore ({
Data: [],
Fields: ["idx", "relation", "leftparenthesis", "fieldname", "operator", "value", "rightparenthesis"]
});
VaR fieldsdef = new Ext. Data. jsonstore ({
Fields: ['value', 'text', 'type', 'data'],
Data :[
{Value: 'A. billno', text: 'string', type: 'string '},
{Value: 'A. date', text: 'date', type: 'date '},
{Value: 'A. boolean', text: 'boole', type: 'boolean '},
{Value: 'A. int', text: 'shape', type: 'int '},
{Value: 'A. float', text: 'floating point ', type: 'float '},
{Value: 'a. lookup ', text: 'lookup', type: 'lookup ', data: [['A', 'list1'], ['bb', 'list2'], ['cc', 'list3']},
{Value: 'a. datalist ', text: 'custom list', type: 'lookup', data: [[10, 'xxxx1'], [20, 'xxxx2 '], [30, 'xxxx3'], [11, 'xxxx11'], [21, 'xxxx21'], [31, 'xxxx31'], [12, 'xxxx22'], [22, 'xxxx22'], [32, 'xxxx32'], [13, 'xxxx13'], [23, 'xxxx23'], [33, 'xxxx33'], [14, 'xxxx14'], [24, 'xxxx24'], [34, 'xxxx3'], [15, 'xxxx15'], [25, 'xxxx25'], [35, 'xxxx35'], [16, 'xxxx16'], [26, 'xxxx26'], [36, 'xxxx36']}
]
});
/*
Author: Peng Guohui
Website: http://kacarton.yeah.net/
Blog: http://blog.csdn.net/nhconch
Email: kacarton (a) sohu.com
The article is original to the author. Please contact me before reprinting. for reprinting, please indicate the source of the article and retain the author information. Thank you for your support!
*/
VaR numericop = datetimeop = new Ext. Data. simplestore ({
Fields: ['value', 'text'],
Data: [['=', '='], ['<>', '<>'], ['<', '<'], ['<=', '<='], ['<', '>'], ['> =', '> ='], ['is null ', 'blank '], ['is not null', 'non-blank']
});
VaR stringop = new Ext. Data. simplestore ({
Fields: ['value', 'text'],
Data: [['=', '='], ['<>', '<>'], ['<', '<'], ['<', '>'],
["Like '| %'", 'uses... '], ["like' % | '",' starts... '], ["like' % | % '",' contains character '], ["not like' % | % '",' does not contain character '],
['Is null', 'blank '], ['is not null', 'non-blank']
});
VaR lookupop = booleanop = new Ext. Data. simplestore ({
Fields: ['value', 'text'],
Data: [['=', '='], ['<>', '<>'], ['is null', 'blank '], ['is not null', 'non-blank ']
});
var objgridtexteditor = new Ext. grid. grideditor (New Ext. form. textfield ();
// var objgridmemoeditor = new Ext. grid. grideditor (New Ext. form. textarea ();
var objgriddateeditor = new Ext. grid. grideditor (New Ext. form. datefield ({format: 'Y-m-d'});
var objgridintegereditor = new Ext. grid. grideditor (New Ext. form. numberfield ({allowblank: false, allownegative: false, allowdecimals: false});
var objgridfloateditor = new Ext. grid. grideditor (New Ext. form. numberfield ({allowblank: false, allownegative: false});
var objgridbooleaneditor = new Ext. grid. grideditor (New Ext. form. comboBox ({
store: [[true, 'Yes'], [false, 'no'],
mode: 'local',
readonly: true,
triggeraction: 'all',
allowblank: false,
Editable: false,
forceselection: True,
blktext: 'select... '
});
var objgridlookupeditor;
Function filelistchange (field, newvalue, oldvalue ){
// Alert (field );
}
Function findrecordvalue (store, prop, propvalue, field ){
VaR record;
If (store. getcount ()> 0 ){
Store. Each (function (r ){
If (R. Data [prop] = propvalue ){
Rrecord = R;
Return false;
}
});
}
Return record? Record. Data [field]: '';
}
Function displayoperator (v ){
Switch (v ){
Case 'is null': Return 'blank ';
Case 'is not null': Return 'non-blank ';
Case "like '| %'": Return 'starts ';
Case "like '% |'": Return 'ends ';
Case "like '% | %'": Return 'contains characters ';
Case "not like '% | %'": Return 'does not contain characters ';
Default: Return V;
}
}
Function displayvalue (v, Params, record ){
VaR datatype = findrecordvalue (fieldsdef, 'value', record. Get ('fieldname'), 'type ');
VaR operator = record. Get ('operator ');
If (operator = 'is null' | Operator = 'is not null') return '';
Switch (datatype ){
Case 'date': Return V? V. dateformat ('Y-m-d '):'';
Case 'boolean': Return (V? 'Yes': 'no ');
Case 'lookup': var DATA = findrecordvalue (fieldsdef, 'value', record. Get ('fieldname'), 'data ');
For (VAR I = 0; I <data. length; I ++)
If (V = data [I] [0]) return data [I] [1];
// Return data [v] + ',' + data [V, 0] + ',' + data [0, 0];
// Return data [V, 0] + ',' + data [0, 0];
/* Case 'string ':
Case 'int ':
Case 'float ':*/
Default: Return V;
}
}
VaR qrowdata = ext. Data. Record. Create ([
{Name: 'idx', type: 'int '},
{Name: 'relation', type: 'string '},
{Name: 'leftparenthesis ', type: 'string '},
{Name: 'fieldname', type: 'string '},
{Name: 'operator', type: 'string '},
{Name: 'value', type: 'string '},
{Name: 'rightparenthesis ', type: 'string '}
]);
VaR Colm = new Ext. Grid. columnmodel ([
{
Header: "Link ",
Dataindex: "relation ",
Width: 50,
Renderer: function (v) {return (V = 'and '? 'And': 'or ')},
Editor: New Ext. Form. ComboBox ({
Store: [['and', 'and'], ['or', 'or'],
Mode: 'local ',
Readonly: True,
Triggeraction: 'all ',
Allowblank: false,
// Valuefield: 'value ',
// Displayfield: 'text ',
Editable: false,
Forceselection: True,
Blanktext: 'Please select'
})
},{
Header: "brackets ",
Dataindex: "leftparenthesis ",
Width: 40,
Editor: New Ext. Form. ComboBox ({
Store: ['(', '),
Mode: 'local ',
Triggeraction: 'all ',
Valuefield: 'value ',
Displayfield: 'text ',
Editable: false
})
},{
Header: "field name ",
Dataindex: "fieldname ",
Width: 130,
// Renderer: function (v, Params, record) {return record. Data ['fieldname']},
Renderer: function (v) {return findrecordvalue (fieldsdef, 'value', V, 'text ');},
Editor: New Ext. Form. ComboBox ({
Store: fieldsdef,
Mode: 'local ',
Triggeraction: 'all ',
Valuefield: 'value ',
Displayfield: 'text ',
Editable: false,
Listeners: {change: filelistchange}
})
},{
Header: "operator ",
Width: 80,
Dataindex: "operator ",
Renderer: displayoperator
},{
Header: "content ",
Dataindex: "value ",
Width: 130,
Renderer: displayvalue
},{
Header: "brackets ",
Width: 40,
Dataindex: "rightparenthesis ",
Editor: New Ext. Form. ComboBox ({
Store: [')', ')'],
Mode: 'local ',
Triggeraction: 'all ',
Valuefield: 'value ',
Displayfield: 'text ',
Editable: false
})
}
]);
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
