由于项目需要做一个动态的extjs树、列等等,简而言之,就是一个都是动态的加载功能,

自己琢磨了半天,查各种资料,弄了将近两个星期,终于做出来了

首先,想看表结构,我的这个功能需要主从两张表来支持

代码目录表:

CREATE TABLE SYS_T01_CODECONTENT
(
ID NUMBER NOT NULL,
PID NUMBER NOT NULL,
TABLENAME VARCHAR2(50 BYTE),
ZH_CN VARCHAR2(200 BYTE),
ENABLE CHAR(1 BYTE)
);

代码结构表:

CREATE TABLE SYS_T01_CODESTRUCT
(
ID NUMBER,
TABLENAME VARCHAR2(20 BYTE),
COLUMNS VARCHAR2(20 BYTE),
ZH_CN VARCHAR2(20 BYTE),
ENABLE CHAR(1 BYTE),
PRECISION NUMBER,
TYPE VARCHAR2(20 BYTE)
);

然后是程序部分了,

最开始先加载一个树

<script>
Ext.onReady(function () {
Ext.BLANK_IMAGE_URL = 'Scripts/ExtJS/resources/images/default/s.gif';
Ext.QuickTips.init();
//异步加载根节点
var root = new Ext.tree.AsyncTreeNode({
text: '所有表',
draggable: false,
id: '0'
});
//加载数据
var treeloader = new Ext.tree.TreeLoader({
dataUrl: 'CodeManager.aspx?opt=GetTree'
});
//树
var tree = new Ext.tree.TreePanel({
rootVisible: true,
layout: 'fit',
width: document.documentElement.clientWidth * 0.2,
height: document.documentElement.clientHeight,
autoScroll: true,
renderTo: 'tree',
animate: true,
enableDD: false,
title: '代码目录表',
root: root,
loader: treeloader
});
//双击事件
tree.on("dblclick", function (node) {
//节点ID
node = node.id;
//全局变量
var data;
//grid中取出的字段对象
var field = Array();
//form表单item
var items = '';
var value = '';
var params = '';
var rowVal = '';
//添加动态列 这里才是加载动态grid的关键
var addColumn = function () {
this.fields = ''; //列文件解析对象
this.columns = ''; //列文件列头对象
this.addColumns = function (name, caption) { //私有函数
if (this.fields.length > 0) {
this.fields += ',';
}
if (this.columns.length > 0) {
this.columns += ',';
}
this.fields += '{name:"' + name + '"}';
this.columns += '{header:"' + caption + '",dataIndex:"' + name + '",width:100,sortable:true}';
};
}; var createGrid = function () {
//赋值给列
var cm = new Ext.grid.ColumnModel(eval('([' + data.columns + '])'));
//默认排序
cm.defaultSortable = true;
//数据字段
var fields = eval('([' + data.fields + '])');
//加载数据源
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
method: 'GET',
url: "CodeManager.aspx?opt=GetData&&node=" + node + ""
}),
reader: new Ext.data.JsonReader({
totalProperty: "total",
root: "rows",
fields: fields,
successProperty: 'success'
})
});
//重新加载数据
store.load({ params: { start: 1, limit: 20} });
//分页工具栏
var pagingBar = new Ext.PagingToolbar({
displayInfo: true,
emptyMsg: "没有数据显示",
displayMsg: "显示从{0}条数据到{1}条数据,共{2}条数据",
store: store,
pageSize: 20
}); });
</script>

在树的代码部分加载grid

  var grid = new Ext.grid.GridPanel({
title: "代码结构表",
cm: cm,
id: "content_panel",
renderTo: "content",
frame: true,
border: true,
layout: "fit",
width: document.documentElement.clientWidth * 0.8,
height: document.documentElement.clientHeight,
store: store,
pageSize: 20,
viewConfig: {
forceFit: true
},
bbar: pagingBar,
tbar: [
{
text: '新增',
id: 'btn_add',
iconCls: 'newIcon',
handler: function Add() {
$("#win_new").html("");
items = "";
for (var i = 0; i < grid.colModel.config.length; i++) {
field = grid.colModel.config[i];
items += "{fieldLabel: '" + field.header + "',name: '" + field.dataIndex + "',id: '" + field.dataIndex + "',width: 180},";
}
//截取以逗号结尾之前的部分
items = "[" + items.substring(0, items.lastIndexOf(',')) + "]";
//将字符串转换成JSON对象
items = eval(items);
//新增表单
var form = new Ext.form.FormPanel({ //创建表单面板
labelAlign: 'center', //水平对齐方式
layout: 'form', //布局模式
id: 'form_xg', //设置ID
labelWidth: 100, //宽度
frame: true, //是否显示frame
defaultType: 'textfield', //默认文本类型
defaults: { allowBlank: false }, //默认是否允许为空
autoHeight: true, //自适应高度
autoWidth: true, //自适应宽度
bodyStyle: 'padding:0 0 10px 30px;', //设置窗体样式
items: items
}); //新增窗体
var win_new = new Ext.Window({
el: 'win_new',
layout: 'form',
resizable: false,
title: '<center>新增代码结构</center>',
constrain: true,
constrainHeader: true,
animateTarget: 'target',
modal: false,
autoScroll: true,
autowidth: true,
autoHeight: true,
closeAction: 'hide',
defaultType: 'textfield',
items: [form],
buttonAlign: 'center',
defaultButton: '0',
buttons: [
{
text: '确定',
align: 'center',
handler: function () {
//遍历新增表单
value = "";
form.items.each(function (item, index, length) {
value += item.initialConfig.name + ":";
value += "'" + Ext.getCmp(item.initialConfig.id).getValue() + "',";
});
value = "{" + value.substring(0, value.lastIndexOf(',')) + "}";
Ext.Ajax.request({
url: "CodeManager.aspx?opt=New&&node=" + node + "&&codeStruct=" + value + "",
method: "POST",
async: false,
success: function (response) {
if (response.responseText != 0) {
Ext.Msg.alert("提示信息", "添加成功!");
win_new.hide();
grid.store.reload();
}
else {
Ext.Msg.alert("提示信息", "添加失败!");
}
},
failure: function () {
win_new.hide();
Ext.Msg.alert("提示信息", "惟一字段数据重复或数据为空!");
}
}); }
}
, {
text: '取消',
align: 'center',
tooltip: '退出并关闭当前窗口',
handler: function () {
win_new.hide();
}
}
]
});
win_new.show();
}
},
{
text: '修改',
id: 'btn_sub',
iconCls: 'modIcon',
handler: function Modify() {
var rows = grid.getSelectionModel().getSelections();
if (rows.length == 0) {
Ext.Msg.alert("提示信息", '请至少选择一条记录');
return;
}
$("#win_update").html("");
items = "";
for (var i = 0; i < grid.colModel.config.length; i++) {
field = grid.colModel.config[i];
items += "{fieldLabel: '" + field.header + "',name: '" + field.dataIndex + "_update',id: '" + field.dataIndex + "_update',width: 180},";
}
//截取以逗号结尾之前的部分
items = "[" + items.substring(0, items.lastIndexOf(',')) + "]";
//将字符串转换成JSON对象
items = eval(items);
//修改表单
var form = new Ext.form.FormPanel({ //创建表单面板
labelAlign: 'center', //水平对齐方式
layout: 'form', //布局模式
id: 'form_modify', //设置ID
labelWidth: 100, //宽度
frame: true, //是否显示frame
defaultType: 'textfield', //默认文本类型
defaults: { allowBlank: false }, //默认是否允许为空
autoHeight: true, //自适应高度
autoWidth: true, //自适应宽度
bodyStyle: 'padding:0 0 10px 30px;', //设置窗体样式
items: items
}); //表单循环
form.items.each(function (item) {
var rec = rows[0].json;
//数据结构循环
for (var key in rec) {
if (item.id == (key + "_update")) {
Ext.getCmp(key + "_update").setValue(rec[key]);
};
}
}); //修改窗体
var win_update = new Ext.Window({
el: 'win_update',
layout: 'form',
resizable: false,
title: '<center>修改结构表信息</center>',
constrain: true,
constrainHeader: true,
animateTarget: 'target',
modal: false,
autoScroll: true,
autowidth: true,
autoHeight: true,
closeAction: 'hide',
defaultType: 'textfield',
items: [form],
buttonAlign: 'center',
defaultButton: '0',
buttons: [
{
text: '确定',
align: 'center',
handler: function () {
//遍历修改表单,获取表单的值
value = "";
form.items.each(function (item) {
value += item.initialConfig.name + ":";
value += "'" + Ext.getCmp(item.initialConfig.id).getValue() + "',";
});
value = "{" + escape(value.substring(0, value.lastIndexOf(',')))
+ "}"; rowVal = '';
var name = rows[0].json;
for (var key in name) {
rowVal += key + ":" + name[key] + ",";
}
rowVal = "{" + escape(rowVal.substring(0, rowVal.lastIndexOf(','))) + "}"; Ext.Ajax.request({
url: "CodeManager.aspx?opt=Modify&&node=" + node + "&&codeStruct=" + value + "&&rowVal=" + rowVal + "",
method: "POST",
async: false,
success: function (response) {
if (response.responseText != 0) {
Ext.Msg.alert("提示信息", "修改成功!");
win_update.hide();
grid.store.reload();
}
else {
win_update.hide();
Ext.Msg.alert("提示信息", "修改失败!");
}
},
failure: function () {
win_update.hide();
Ext.Msg.alert("提示信息", "修改的数据不符合规范!");
}
}); }
}
, {
text: '取消',
align: 'center',
tooltip: '退出并关闭当前窗口',
handler: function () {
win_update.hide();
}
}
]
});
win_update.show(); }
},
{
text: '删除',
id: 'btn_del',
iconCls: 'delIcon',
handler: function Delete() {
//获取行对象
var rows = grid.getSelectionModel().getSelections();
if (rows.length == 0) {
Ext.Msg.alert("提示信息", '请至少选择一条记录');
return;
}
//遍历选中行
rowVal = '';
var name = rows[0].json;
for (var key in name) {
rowVal += key + ":" + name[key] + ",";
}
rowVal = "{" + rowVal.substring(0, rowVal.lastIndexOf(',')) + "}";
Ext.Msg.confirm('请确认', '您确定要删除这些信息吗?',function (button, text) {
if (button == "yes") {
Ext.Ajax.request({
url: "CodeManager.aspx?opt=Del&&node=" + node + "&&rowVal=" + rowVal + "",
method: "POST",
async: false,
buttons: { yes: '确定', no: '取消' },
success: function (response) {
if (response.responseText != 0) {
Ext.Msg.alert("提示信息", "删除成功!");
grid.store.reload();
}
else {
Ext.Msg.alert("提示信息", "删除失败!");
}
}
});
}
});
}
}
]
});
}; //请求列、节点,返回列和数据
var params = { "node": node, "opt": "GetColumn" };
Ext.Ajax.request({ //回传请求
url: "CodeManager.aspx", //回传地址
params: params, //回传参数
success: function (response, option) {
if (response.responseText == "") {
return;
}
data = new addColumn();
//JSON格式化返回结果(字符串类型)转换成JSON对象
var res = Ext.util.JSON.decode(response.responseText);
//循环JSON对象,取出特定列
for (var i = 0; i < res.length; i++) {
var rec = res[i];
data.addColumns(rec.COLUMNS, rec.ZH_CN);
}
//清除代码表
$("#content").html('');
$("#win_new").html('');
createGrid();
},
failure: function () {
Ext.Msg.alert("消息", "查询出错,请打开数据库查看数据表名是否正确?", "谢谢");
}
});
});

extjs动态树 动态grid 动态列的更多相关文章

  1. ExtJs 日期相加,Grid表格列可编辑

    1.日期相加: Ext.Date.add(new Date(), Ext.Date.DAY, 15) 2.Grid表格列可编辑: {    header : "实际已交货量",   ...

  2. luogu3703 [SDOI2017]树点涂色(线段树+树链剖分+动态树)

    link 你谷的第一篇题解没用写LCT,然后没观察懂,但是自己YY了一种不用LCT的做法 我们考虑对于每个点,维护一个fa,代表以1为根时候这个点的父亲 再维护一个bel,由于一个颜色相同的段一定是一 ...

  3. [HNOI2010]弹飞绵羊 (平衡树,LCT动态树)

    题面 题解 因为每个点都只能向后跳到一个唯一的点,但可能不止一个点能跳到后面的某个相同的点, 所以我们把它抽象成一个森林.(思考:为什么是森林而不是树?) 子节点可以跳到父节点,根节点再跳就跳飞了. ...

  4. 如何利用FineReport制作动态树报表

    在对数据字段进行分类管理时,利用动态树折叠数据是一个很好的方法,也就是点击数据前面的加号才展开对应下面的数据,如下图.那这样的效果在制作报表时该如何实现呢? 下面以报表工具FineReport为例介绍 ...

  5. 洛谷P4719 【模板】"动态 DP"&动态树分治

    [模板]"动态 DP"&动态树分治 第一道动态\(DP\)的题,只会用树剖来做,全局平衡二叉树什么的就以后再学吧 所谓动态\(DP\),就是在原本的\(DP\)求解的问题上 ...

  6. 动态树之LCT(link-cut tree)讲解

    动态树是一类要求维护森林的连通性的题的总称,这类问题要求维护某个点到根的某些数据,支持树的切分,合并,以及对子树的某些操作.其中解决这一问题的某些简化版(不包括对子树的操作)的基础数据结构就是LCT( ...

  7. 动态设置和访问cxgrid列的Properties(转)

    原文:http://www.cnblogs.com/hnxxcxg/archive/2010/05/24/2940711.html 动态设置和访问cxgrid列的Properties 设置: cxGr ...

  8. 【BZOJ-3589】动态树 树链剖分 + 线段树 + 线段覆盖(特殊的技巧)

    3589: 动态树 Time Limit: 30 Sec  Memory Limit: 1024 MBSubmit: 405  Solved: 137[Submit][Status][Discuss] ...

  9. BZOJ-2049 Cave洞穴勘测 动态树Link-Cut-Tree (并查集骗分TAT)

    2049: [Sdoi2008]Cave 洞穴勘测 Time Limit: 10 Sec Memory Limit: 259 MB Submit: 5833 Solved: 2666 [Submit] ...

  10. 学习笔记-动态树Link-Cut-Tree

    --少年你有梦想吗? --少年你听说过安利吗? 安利一个集训队讲解:http://wenku.baidu.com/view/75906f160b4e767f5acfcedb 关于动态树问题,有多种方法 ...

随机推荐

  1. Xcode 7 支持http请求info.plist设置

    由于iOS9改用更安全的https,为了能够在iOS9中正常使用http发送网络请求,请在"Info.plist"中进行如下配置,否则影响SDK的使用. 1.找到项目中的 Info ...

  2. Cogs 1008. 贪婪大陆(树状数组)

    贪婪大陆 难度等级 ★★ 时间限制 1000 ms (1 s) 内存限制 128 MB 测试数据 10 简单对比 输入文件:greedisland.in 输出文件:greedisland.out 简单 ...

  3. MySQL常见错误类型

    MySQL常见错误类型:1005:创建表失败1006:创建数据库失败1007:数据库已存在,创建数据库失败1008:数据库不存在,删除数据库失败1009:不能删除数据库文件导致删除数据库失败1010: ...

  4. vsftpd服务详解

    一.vsftpd基本使用 VSFTP是一个基于GPL发布的类Unix系统上使用的FTP服务器软件,它的全称是Very Secure FTP,从此名称可以看出来,编制者的初衷是代码的安全.安全性是编写V ...

  5. ARM 平台上的Linux系统启动流程

    开始学习嵌入式开发就一直在使用Linux系统作为学习的平台,到现在无论是PC机还是ARM开发板都已经能顺利地跑起了Linux系统,但是对Linux 的启动流程还是不甚了解.于是开始各种百度谷歌,当然看 ...

  6. Linux 进程编程

    Linux通过维护者五个状态来调度进程的运行.这五个状态分别为:运行.可中断.不可中断.僵死.停止 . PID来标识不同的进程的,Linux中每一个进程都有一个唯一的进程号 . PCB块就是一个进程资 ...

  7. .NET多线程编程(转)

    在.NET多线程编程这个系列我们讲一起来探讨多线程编程的各个方面.首先我将在本篇文章的开始向大家介绍多线程的有关概念以及多线程编程的基础知识;在接下来的文章中,我将逐一讲述.NET平台上多线程编程的知 ...

  8. ASP.net+MVC--2

    1.ASP.NET MVC控制器 1)在Controllers文件夹下新建控制类 public class HelloWorld2Controller : Controller { public st ...

  9. sqlsever2008数据库的备份与还原

    本文数据库的名称为ProjectControl  public static SqlConnection conn = new SqlConnection("server=(local);u ...

  10. Error Code: 1064 – You have an error in your SQL syntax解决几个方法

    本文转自 http://www.anyiwa.com/?p=1066 Error Code: 1064 – You have an error in your SQL syntax解决几个方法 十一月 ...