bugfix
This commit is contained in:
yumoqing
parent
8275f265c7
commit
ce49858187
314
bricks/tree.js
314
bricks/tree.js
@ -1,19 +1,19 @@
|
||||
var bricks = window.bricks || {};
|
||||
bricks.TreeNode = class extends bricks.VBox {
|
||||
constructor(tree, parent, data){
|
||||
constructor(tree, pnode, data){
|
||||
var opts = {
|
||||
width:'100%',
|
||||
height:'auto',
|
||||
}
|
||||
super(opts);
|
||||
this.tree = tree;
|
||||
this.parent = parent;
|
||||
this.parent_node = pnode;
|
||||
this.children_loaded = false;
|
||||
this.data = data;
|
||||
this.is_leaf = this.data.is_leaf;
|
||||
this.params = {id:this.data[this.tree.opts.idField]};
|
||||
this.user_data = data;
|
||||
this.is_leaf = this.user_data.is_leaf;
|
||||
this.params = {id:this.user_data[this.tree.opts.idField]};
|
||||
if (this.tree.multitype_tree){
|
||||
this.params['type'] = this.data[this.tree.opts.typeField];
|
||||
this.params['type'] = this.user_data[this.tree.opts.typeField];
|
||||
}
|
||||
var n = new bricks.HBox({
|
||||
height:this.tree.row_height,
|
||||
@ -24,21 +24,21 @@ bricks.TreeNode = class extends bricks.VBox {
|
||||
n.bind('click', this.tree.node_click_handle.bind(this.tree, this));
|
||||
this.node_widget = n;
|
||||
this.create_node_content(n);
|
||||
if (! this.data.is_leaf) {
|
||||
if (! this.user_data.is_leaf) {
|
||||
this.container = new bricks.VBox({height:'auto'});
|
||||
this.add_widget(this.container);
|
||||
this.container.dom_element.style.marginLeft = bricks.app.charsize + 'px';
|
||||
if (this.data.children){
|
||||
this.tree.create_node_children(this, this.data.children);
|
||||
if (this.user_data.children){
|
||||
this.tree.create_node_children(this, this.user_data.children);
|
||||
}
|
||||
this.container.hide();
|
||||
}
|
||||
}
|
||||
getValue(){
|
||||
return this.data;
|
||||
return this.user_data;
|
||||
}
|
||||
get_id(){
|
||||
return this.data[this.tree.idField];
|
||||
return this.user_data[this.tree.idField];
|
||||
}
|
||||
selected(flg){
|
||||
if (flg){
|
||||
@ -93,7 +93,7 @@ bricks.TreeNode = class extends bricks.VBox {
|
||||
widget.add_widget(this.check_w);
|
||||
this.check_w.bind('changed', this.tree.node_checked.bind(this.tree, this))
|
||||
}
|
||||
var dtype = this.data[this.tree.opts.typeField];
|
||||
var dtype = this.user_data[this.tree.opts.typeField];
|
||||
var icon = objget(TypeIcons, dtype);
|
||||
if (!icon && this.tree.opts.default_type){
|
||||
icon = objget(TypeIcons, his.tree.opts.default_type);
|
||||
@ -105,7 +105,8 @@ bricks.TreeNode = class extends bricks.VBox {
|
||||
url:icon
|
||||
});
|
||||
widget.add_widget(img);
|
||||
var txt = this.data[this.tree.opts.textField];
|
||||
// console.log('info:textField=', this.tree.textField, 'data=', this.user_data, 'tree=', this.tree, 'tree opts=', this.tree.opts);
|
||||
var txt = this.user_data[this.tree.opts.textField];
|
||||
this.str_w = new bricks.Text({text:txt});
|
||||
this.input = new bricks.UiStr({name:'text', value:txt});
|
||||
this.input.bind('blur', this.edit_handle.bind(this));
|
||||
@ -121,7 +122,7 @@ bricks.TreeNode = class extends bricks.VBox {
|
||||
return;
|
||||
var v = this.input.value;
|
||||
r = await this.syncdata('edit');
|
||||
this.data[this.tree.opts.textField] = v;
|
||||
this.user_data[this.tree.opts.textField] = v;
|
||||
this.str_w = new bricks.Text({text:v});
|
||||
this.node_widget.remove_widget(this.input);
|
||||
this.node_widget.add_widget(this.str_w);
|
||||
@ -174,14 +175,19 @@ bricks.Tree = class extends bricks.VScrollPanel {
|
||||
if (this.opts.dataurl){
|
||||
schedule_once(this.get_children_data.bind(this, this), 0.1);
|
||||
} else {
|
||||
this.user_data = {
|
||||
id:null,
|
||||
children:this.opts.data
|
||||
}
|
||||
this.create_node_children(this, this.opts.data);
|
||||
}
|
||||
this.bind('node_selected',this.node_info_log.bind(this));
|
||||
}
|
||||
getValue(){
|
||||
return this.data;
|
||||
return this.user_data;
|
||||
}
|
||||
get_id(){
|
||||
return this.data[this.idField];
|
||||
return this.user_data[this.idField];
|
||||
}
|
||||
create_toolbar(){
|
||||
var toolbar = bricks.extend({}, this.toolbar);
|
||||
@ -219,31 +225,120 @@ bricks.Tree = class extends bricks.VScrollPanel {
|
||||
var d = event.params;
|
||||
var node = this;
|
||||
if (this.selected_node){
|
||||
d[this.parentField] = this.selected+node.get_id();
|
||||
node = this.selected_node;
|
||||
d[this.parentField] = node.get_id();
|
||||
}
|
||||
var jc = new bricks.HttpJson()
|
||||
var desc = jc.post(this.editable.add_url, {params:d});
|
||||
var desc = await jc.post(this.editable.add_url, {params:d});
|
||||
if (desc.widgettype == 'Message'){
|
||||
var data = desc.options.user_data;
|
||||
this.build_subnode(node, data);
|
||||
this.append_new_subnode(node, data);
|
||||
}
|
||||
var w = await bricks.widgetBuild(desc, this);
|
||||
w.open();
|
||||
}
|
||||
async create_tree_nodes(node, records){
|
||||
for (var i=0;i<records.length;i++){
|
||||
this.build_subnode(node, records[i]);
|
||||
}
|
||||
}
|
||||
append_new_subnode(node, data){
|
||||
data.is_left = true;
|
||||
if (!node.user_data.children){
|
||||
node.user_data.children = [];
|
||||
}
|
||||
node.is_leaf = false;
|
||||
node.children_loaded = true;
|
||||
node.user_data.children.push(data)
|
||||
this.build_subnode(node, data);
|
||||
}
|
||||
|
||||
build_subnode(node, data){
|
||||
var n = new bricks.TreeNode(this, node, data);
|
||||
node.container.add_widget(n);
|
||||
}
|
||||
|
||||
async delete_node(){
|
||||
if (! this.selected_node){
|
||||
w = new bricks.Error({title:'Delete', message:'No selected node found'});
|
||||
w.open();
|
||||
return;
|
||||
}
|
||||
var w = new bricks.Conform({
|
||||
title:'Delete node',
|
||||
message:'Please conform delete selected node'
|
||||
});
|
||||
w.bind('conformed', this.delete_node_conformed.bind(this))
|
||||
}
|
||||
async delete_node_conformed(event){
|
||||
var d = {};
|
||||
d[this.idField] = this.selected_node.get_id();
|
||||
var jc = new bricks.HttpJson()
|
||||
var desc = await jc.post(this.editable.delete_url, {params:d});
|
||||
if (desc.widgettype == 'Message'){
|
||||
var pnode = this.selected_node.parent_node;
|
||||
console.log('parent node=', pnode);
|
||||
if (pnode && pnode.container){
|
||||
pnode.container.remove_widget(this.selected_node);
|
||||
}
|
||||
this.selected_node = null;
|
||||
}
|
||||
var w = await bricks.widgetBuild(desc, this);
|
||||
w.open();
|
||||
}
|
||||
delete_subnode(node, subnode){
|
||||
var subid = subnode.user_data[this.idField];
|
||||
var children = [];
|
||||
for (var i=0;i< node.user_data.children.length;i++){
|
||||
var c = node.user_data.children[i];
|
||||
if (c[this.idField] != subid){
|
||||
children.push(c);
|
||||
}
|
||||
}
|
||||
node.user_data.children = children;
|
||||
node.container.remove_widget(subnode);
|
||||
}
|
||||
|
||||
async update_node(){
|
||||
if (! this.selected_node){
|
||||
w = new bricks.Error({title:'Update', message:'No selected node found'});
|
||||
w.open();
|
||||
return;
|
||||
}
|
||||
var fields = [];
|
||||
for (var i=0;i<this.editable.fields.length;i++){
|
||||
var f = bricks.extend({}, this.editable.fields[i]);
|
||||
f.value = this.selected_node.user_data[f.name];
|
||||
fields.push(f);
|
||||
}
|
||||
var w = new bricks.ModalForm({
|
||||
target:this,
|
||||
"width":"80%",
|
||||
"height":"80%",
|
||||
title:'add new node',
|
||||
fields:fields
|
||||
});
|
||||
w.bind('submit', this.update_node_inputed.bind(this))
|
||||
}
|
||||
|
||||
async update_node_inputed(event){
|
||||
var d = event.params;
|
||||
var node = this.selected_node;
|
||||
d[this.idField] = node.get_id();
|
||||
var jc = new bricks.HttpJson()
|
||||
var desc = await jc.post(this.editable.update_url, {params:d});
|
||||
if (desc.widgettype == 'Message'){
|
||||
this.update_node_data(node, d);
|
||||
}
|
||||
var w = await bricks.widgetBuild(desc, this);
|
||||
w.open();
|
||||
}
|
||||
|
||||
update_node_data(node, data){
|
||||
for (var name in Object.keys(data)){
|
||||
node.user_data[name] = data[name];
|
||||
}
|
||||
node.str_w.set_text(data[this.textField]);
|
||||
}
|
||||
|
||||
async get_children_data(node){
|
||||
@ -255,6 +350,9 @@ bricks.Tree = class extends bricks.VScrollPanel {
|
||||
if (d.length == 0){
|
||||
node.is_leaf = true;
|
||||
} else {
|
||||
this.user_data = {
|
||||
children:d
|
||||
}
|
||||
this.create_tree_nodes(node, d);
|
||||
}
|
||||
}
|
||||
@ -266,17 +364,18 @@ bricks.Tree = class extends bricks.VScrollPanel {
|
||||
}
|
||||
}
|
||||
node_click_handle(node, event){
|
||||
if (this.selected_node == node){
|
||||
this.node_selected(false);
|
||||
} else {
|
||||
if (this.selected_node){
|
||||
this.node_selected(this.selected_node, false);
|
||||
}
|
||||
if (this.selected_node == node){
|
||||
this.selected_node = null;
|
||||
} else {
|
||||
this.selected_node = node;
|
||||
this.node_selected(node, true);
|
||||
}
|
||||
}
|
||||
node_selected(node, flag){
|
||||
console.log('node_selected():node=', node, flag);
|
||||
node.selected(flag);
|
||||
var d = {
|
||||
node:node,
|
||||
@ -284,7 +383,7 @@ bricks.Tree = class extends bricks.VScrollPanel {
|
||||
id:node.get_id(),
|
||||
selected:flag
|
||||
}
|
||||
this.dispatch('node_selected', node);
|
||||
this.dispatch('node_selected', d);
|
||||
}
|
||||
async node_checked(node, event){
|
||||
var cb = event.target.bricks_widget;
|
||||
@ -297,169 +396,18 @@ bricks.Tree = class extends bricks.VScrollPanel {
|
||||
}
|
||||
this.dispatch('check_changed', d);
|
||||
}
|
||||
}
|
||||
/*
|
||||
在数控件中提供增删改能力
|
||||
*/
|
||||
bricks. EditableTree = class extends bricks.Tree {
|
||||
/*
|
||||
{
|
||||
...
|
||||
admin:{
|
||||
url:
|
||||
add:{
|
||||
icon:
|
||||
}
|
||||
delete_node:{
|
||||
icon:
|
||||
}
|
||||
move_up:
|
||||
move_down:
|
||||
move_top:
|
||||
move_bottom:
|
||||
}
|
||||
}
|
||||
*/
|
||||
constructor(opts){
|
||||
super(opts);
|
||||
}
|
||||
create_toolbar(){
|
||||
if (!this.opts.admin){
|
||||
return
|
||||
}
|
||||
var desc = {
|
||||
height:'auto',
|
||||
tools:[
|
||||
{
|
||||
name:'add',
|
||||
icon:bricks_resource('imgs/add.png')
|
||||
},
|
||||
{
|
||||
name:'edit',
|
||||
icon:bricks_resource('imgs/edit.png')
|
||||
},
|
||||
{
|
||||
name:'move_top',
|
||||
icon:bricks_resource('imgs/move_top.png')
|
||||
},
|
||||
{
|
||||
name:'move_up',
|
||||
icon:bricks_resource('imgs/move_up.png')
|
||||
},
|
||||
{
|
||||
name:'move_down',
|
||||
icon:bricks_resource('imgs/move_down.png')
|
||||
},
|
||||
{
|
||||
name:'move_button',
|
||||
icon:bricks_resource('imgs/move_bottom.png')
|
||||
},
|
||||
{
|
||||
name:'delete',
|
||||
icon:bricks_resource('imgs/delete_node.png')
|
||||
}
|
||||
]
|
||||
}
|
||||
this.toolbar = new bricks.Toolbar(desc);
|
||||
this.toolbar.bind('command', this.command_handle.bind(this));
|
||||
this.add_widget(this.toolbar, 0);
|
||||
}
|
||||
command_handle(e){
|
||||
bricks.debug('command event fire ...', e);
|
||||
var name = e.params.name;
|
||||
switch (name) {
|
||||
case 'add':
|
||||
this.add_node();
|
||||
break;
|
||||
case 'delete':
|
||||
this.delete_node();
|
||||
break;
|
||||
case 'edit':
|
||||
this.edit_node();
|
||||
break;
|
||||
case 'move_top':
|
||||
this.move_top();
|
||||
break;
|
||||
case 'move_up':
|
||||
this.move_up();
|
||||
break;
|
||||
case 'move_down':
|
||||
this.move_down();
|
||||
break;
|
||||
case 'move_bottom':
|
||||
this.move_bottom();
|
||||
break;
|
||||
}
|
||||
}
|
||||
add_node(){
|
||||
var node = this;
|
||||
if (this.selected_node) node = this.selected_node;
|
||||
var data = { };
|
||||
data[this.opts.idField] = 'undefined';
|
||||
data[this.opts.textField] = 'new node';
|
||||
var n = new bricks.TreeNode(this, node, data);
|
||||
node.container.add_widget(n);
|
||||
n.edit();
|
||||
bricks.debug('add_node() finished ...');
|
||||
}
|
||||
edit_node(){
|
||||
if (! this.selected_node){
|
||||
node_info_log(event){
|
||||
if (event.params.selected == false){
|
||||
return;
|
||||
}
|
||||
this.selected_node.edit();
|
||||
}
|
||||
delete_node(){
|
||||
if (! this.selected_node){
|
||||
return;
|
||||
}
|
||||
this.selected_node.delete();
|
||||
}
|
||||
move_top(){
|
||||
if (! this.selected_node){
|
||||
return;
|
||||
}
|
||||
this.selected_node.move_top();
|
||||
}
|
||||
move_up(){
|
||||
if (! this.selected_node){
|
||||
return;
|
||||
}
|
||||
this.selected_node.move_up();
|
||||
}
|
||||
move_down(){
|
||||
if (! this.selected_node){
|
||||
return;
|
||||
}
|
||||
this.selected_node.move_down();
|
||||
}
|
||||
move_botton(){
|
||||
if (! this.selected_node){
|
||||
return;
|
||||
}
|
||||
this.selected_node.move_botton();
|
||||
}
|
||||
}
|
||||
bricks. PolymorphyTree = class extends bricks.Tree {
|
||||
/*
|
||||
{
|
||||
root:[t1],
|
||||
nodetypes:{
|
||||
t1:{
|
||||
idField:
|
||||
typeField:
|
||||
textField:
|
||||
icon:
|
||||
contextmenu:
|
||||
subtypes:[]
|
||||
}
|
||||
}
|
||||
data:
|
||||
dataurl:
|
||||
}
|
||||
*/
|
||||
constructor(opts){
|
||||
super(opts);
|
||||
var node = event.params.node;
|
||||
console.log('======node info========');
|
||||
console.log('user_data=', node.user_data);
|
||||
console.log('parent=', node.parent_node);
|
||||
console.log('container=', node.container);
|
||||
console.log('======node info end========');
|
||||
}
|
||||
}
|
||||
|
||||
bricks.Factory.register('Tree', bricks.Tree);
|
||||
bricks.Factory.register('EditableTree', bricks.EditableTree);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user