gridpanel动态加载数据的实例代码


Posted in Javascript onJuly 18, 2013
<script type='text/javascript'>
function editEsOrder(options,success,response){
if (success){
var tagModelManager_maxOrderIdJson=Ext.util.JSON.decode(response.responseText);
var orderValue = tagModelManager_maxOrderIdJson.maxOrderId ;
Ext.getCmp('esorder').setValue(orderValue) ;
}
}
var tagModelManager_toolBar=new Ext.Toolbar({
items:[
{id:'tagModel_Save',text:'添加',iconCls:'add',handler:tagModel_Save}
,'-',
{id:'tagModel_dropSelected',text:'删除',iconCls:'remove',handler:tagModel_dropSelected}
]});
new Ext.grid.GridPanel({
id:'tagModelManager_tagModelGrid',
autoScroll:true,  store:new Ext.data.Store(),
cm:new Ext.grid.ColumnModel([new Ext.grid.RowNumberer()]),
sm:new Ext.grid.CheckboxSelectionModel(),
renderTo:'tagModelManager_tagModelDiv',
        width:Ext.getCmp('TagModel_win').getSize().width-16,
        height:Ext.getCmp('TagModel_win').getSize().height-35,
hideHeaders :false,
loadMask:{msg:'正在加载数据,请稍候....'},
collapsible : true,
collapsed : false,
bbar:new Ext.PagingToolbar({
id:'tagModelManager_tagModelPagingBar',
pageSize:getComboValue(),
store:new Ext.data.Store(),
displayInfo:true
}),
tbar:tagModelManager_toolBar
});
Ext.getCmp('tagModelManager_tagModelGrid').render() ;
Ext.getCmp('tagModelManager_tagModelGrid').on('rowdblclick', tagModelSelectRowDblClickEvent);
function tagModelSelectRowDblClickEvent(selectionModel, rowIndex, selectedRecord) {
  var selectedRows = Ext.getCmp('tagModelManager_tagModelGrid').getSelectionModel().getSelections();
      var row=selectedRows[0];   
      tagModel_SaveOrEdit('edit',row);
}
function tagModel_Save() {
      tagModel_SaveOrEdit('save');
}
function tagModelList_search() {
  Ext.Ajax.request({
  url:'editTagModel.html?method=getParams',
   callback:getSearchList
   });
}
function getSearchList(options,success,response) {
if (success){
var tagModelManager_json=Ext.util.JSON.decode(response.responseText);
tagModelManager_tagModelGridTitle = tagModelManager_json.tagModelManager_tagModelGridTitle;
var record = tagModelManager_json.record ;
var tagModelManager_tagModelColumnModels = tagModelManager_json.tagModelManager_tagModelColumnModels ;
        var tagModelManager_tagModelColumnModel=new Ext.grid.ColumnModel(Ext.util.JSON.decode("["+"new Ext.grid.RowNumberer()"+","+"new Ext.grid.CheckboxSelectionModel()"+","+tagModelManager_tagModelColumnModels+"]"));
tagModelManager_tagModelColumnModel.defaultSortable=true;
var strucutreModelManager_tagModelDataStore = new Ext.data.Store({
         baseParams: { tagModelKeyword : Ext.getCmp('tagModelManager_search_button').el.dom.value.trim() },
proxy:new Ext.data.HttpProxy({
url:'editTagModel.html?method=getTagModelDataList'
}),
reader:new Ext.data.JsonReader({
totalProperty:'resultSize',root:'tagModelList'},Ext.util.JSON.decode(record))  });
Ext.getCmp('tagModelManager_tagModelPagingBar').bind(strucutreModelManager_tagModelDataStore);
strucutreModelManager_tagModelDataStore.load({params:{start:0,limit:getComboValue()}}) ;
Ext.getCmp('tagModelManager_tagModelGrid').setTitle(tagModelManager_tagModelGridTitle) ;
Ext.getCmp('tagModelManager_tagModelGrid').reconfigure(strucutreModelManager_tagModelDataStore,tagModelManager_tagModelColumnModel);
Ext.getCmp('tagModelManager_tagModelGrid').expand(false) ;
}
}
function tagModelList_all(){
Ext.Ajax.request({
url:'editTagModel.html?method=getParams',
callback:getTagModel
});
}
function getTagModel(options,success,response){
if (success){
var tagModelManager_json=Ext.util.JSON.decode(response.responseText);
tagModelManager_tagModelGridTitle = tagModelManager_json.tagModelManager_tagModelGridTitle;
var record = tagModelManager_json.record ;
var tagModelManager_tagModelColumnModels = tagModelManager_json.tagModelManager_tagModelColumnModels ;
        var tagModelManager_tagModelColumnModel=new Ext.grid.ColumnModel(Ext.util.JSON.decode("["+"new Ext.grid.RowNumberer()"+","+"new Ext.grid.CheckboxSelectionModel()"+","+tagModelManager_tagModelColumnModels+"]"));
tagModelManager_tagModelColumnModel.defaultSortable=true;
var strucutreModelManager_tagModelDataStore = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({
url:'editTagModel.html?method=getTagModelDataList'
}),
reader:new Ext.data.JsonReader({
totalProperty:'resultSize',root:'tagModelList'},Ext.util.JSON.decode(record))  });
Ext.getCmp('tagModelManager_tagModelPagingBar').bind(strucutreModelManager_tagModelDataStore);
strucutreModelManager_tagModelDataStore.load({params:{start:0,limit:getComboValue()}}) ;
Ext.getCmp('tagModelManager_tagModelGrid').reconfigure(strucutreModelManager_tagModelDataStore,tagModelManager_tagModelColumnModel);
Ext.getCmp('tagModelManager_tagModelGrid').expand(false) ;
}
}
Ext.Ajax.request({
url:'editTagModel.html?method=getParams',
callback:getTagModel
});
</script>
    public void getTagModelDataList(ActionMapping mapping, ActionForm actionform,HttpServletRequest request, HttpServletResponse response){
    ITagModelManager tagmgr = this.getPkgServer().getDriver().getOperateServer().getTagModelManager() ;
    List<HashMap<String,String>> models = new ArrayList<HashMap<String,String>>();
    String tagModelKeyword = request.getParameter("tagModelKeyword");
    List<EssTagModel> tagModels ;
    tagModels =  tagmgr.getEssTagModels() ;
    int resultSize = 0 ;
    if (null != tagModels && !tagModels.isEmpty()){
    //数据分页显示
    resultSize = tagModels.size() ;
    String start = request.getParameter("start") ;
String perPage = request.getParameter("limit") ;
String esType ="";
if (null != start && null != perPage){
int fromIdx = Integer.parseInt(start);
int per =  Integer.parseInt(perPage);
int toIdx = fromIdx + per ;
if (toIdx  > resultSize) toIdx = resultSize ;
tagModels = tagModels.subList(fromIdx,toIdx) ;
}
    for(EssTagModel etm : tagModels){
    HashMap<String,String> map = new HashMap<String, String>();
    map.put("id",   Long.toString(etm.getId())) ;
    map.put("esidentifier", etm.getEsidentifier()) ;
    map.put("estype", etm.getEstype()) ;
    map.put("esdescription", etm.getEsdescription()) ;
    map.put("esorder", Long.toString(etm.getEsorder())) ;
    map.put("metadata", etm.getMetadata()) ;
    models.add(map) ;
    }
    }
    JSONObject json = new JSONObject();
    JSONArray ary = new JSONArray(models);
    json.put("tagModelList", ary);
json.put("resultSize",resultSize);
    writeJson(response, json.toString()) ;
    }
public void getParams(ActionMapping mapping, ActionForm actionform,HttpServletRequest request, HttpServletResponse response){
LinkedHashMap<String,String> tags = new LinkedHashMap<String,String>() ;
tags.put("id", "id") ;
tags.put("esidentifier", "字段") ;
tags.put("estype", "类型") ;
tags.put("esdescription", "描述") ;
tags.put("esorder", "顺序") ;
tags.put("metadata", "元数据") ;
tags.put("esisnull", "是否为必填项") ;
tags.put("eslength", "字段长度") ;
tags.put("esdotlength", "小数点位数") ;
tags.put("esissystem", "是否为系统字段") ;
JSONObject json = new JSONObject();
json.put("record", getJsonRecord(tags)) ;
json.put("tagModelManager_tagModelColumnModels", getJsonColumnModel(tags)) ;
writeJson(response,json.toString());
}
Javascript 相关文章推荐
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 #Javascript
JS获取鼠标坐标的实例方法
Jul 18 #Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 #Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 #Javascript
JS随机生成不重复数据的实例方法
Jul 17 #Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 #Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 #Javascript
You might like
我的群发邮件程序
2006/10/09 PHP
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
JQuery插件开发示例代码
2013/11/06 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
初步认识Python中的列表与位运算符
2015/10/12 Python
python对html过滤处理的方法
2018/10/21 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
python mysql断开重连的实现方法
2019/07/26 Python
详解python中eval函数的作用
2019/10/22 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
How to spawning asynchronous work in J2EE
2016/08/29 面试题
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android