yumoqing/bricks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bugfix

Browse Source
This commit is contained in:
yumoqing 2024-05-21 14:47:08 +08:00
parent 8275f265c7
commit ce49858187
1 changed files with 132 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

316
bricks/tree.js
View File

@ -1,19 +1,19 @@
var bricks = window.bricks || {}; var bricks = window.bricks || {};
bricks.TreeNode = class extends bricks.VBox { bricks.TreeNode = class extends bricks.VBox {
constructor(tree, parent, data){ constructor(tree, pnode, data){
var opts = { var opts = {
width:'100%', width:'100%',
height:'auto', height:'auto',
} }
super(opts); super(opts);
this.tree = tree; this.tree = tree;
this.parent = parent; this.parent_node = pnode;
this.children_loaded = false; this.children_loaded = false;
this.data = data; this.user_data = data;
this.is_leaf = this.data.is_leaf; this.is_leaf = this.user_data.is_leaf;
this.params = {id:this.data[this.tree.opts.idField]}; this.params = {id:this.user_data[this.tree.opts.idField]};
if (this.tree.multitype_tree){ 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({ var n = new bricks.HBox({
height:this.tree.row_height, 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)); n.bind('click', this.tree.node_click_handle.bind(this.tree, this));
this.node_widget = n; this.node_widget = n;
this.create_node_content(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.container = new bricks.VBox({height:'auto'});
this.add_widget(this.container); this.add_widget(this.container);
this.container.dom_element.style.marginLeft = bricks.app.charsize + 'px'; this.container.dom_element.style.marginLeft = bricks.app.charsize + 'px';
if (this.data.children){ if (this.user_data.children){
this.tree.create_node_children(this, this.data.children); this.tree.create_node_children(this, this.user_data.children);
} }
this.container.hide(); this.container.hide();
} }
} }
getValue(){ getValue(){
return this.data; return this.user_data;
} }
get_id(){ get_id(){
return this.data[this.tree.idField]; return this.user_data[this.tree.idField];
} }
selected(flg){ selected(flg){
if (flg){ if (flg){
@ -93,7 +93,7 @@ bricks.TreeNode = class extends bricks.VBox {
widget.add_widget(this.check_w); widget.add_widget(this.check_w);
this.check_w.bind('changed', this.tree.node_checked.bind(this.tree, this)) 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); var icon = objget(TypeIcons, dtype);
if (!icon && this.tree.opts.default_type){ if (!icon && this.tree.opts.default_type){
icon = objget(TypeIcons, his.tree.opts.default_type); icon = objget(TypeIcons, his.tree.opts.default_type);
@ -105,7 +105,8 @@ bricks.TreeNode = class extends bricks.VBox {
url:icon url:icon
}); });
widget.add_widget(img); 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.str_w = new bricks.Text({text:txt});
this.input = new bricks.UiStr({name:'text', value:txt}); this.input = new bricks.UiStr({name:'text', value:txt});
this.input.bind('blur', this.edit_handle.bind(this)); this.input.bind('blur', this.edit_handle.bind(this));
@ -121,7 +122,7 @@ bricks.TreeNode = class extends bricks.VBox {
return; return;
var v = this.input.value; var v = this.input.value;
r = await this.syncdata('edit'); 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.str_w = new bricks.Text({text:v});
this.node_widget.remove_widget(this.input); this.node_widget.remove_widget(this.input);
this.node_widget.add_widget(this.str_w); this.node_widget.add_widget(this.str_w);
@ -174,14 +175,19 @@ bricks.Tree = class extends bricks.VScrollPanel {
if (this.opts.dataurl){ if (this.opts.dataurl){
schedule_once(this.get_children_data.bind(this, this), 0.1); schedule_once(this.get_children_data.bind(this, this), 0.1);
} else { } else {
this.user_data = {
id:null,
children:this.opts.data
}
this.create_node_children(this, this.opts.data); this.create_node_children(this, this.opts.data);
} }
this.bind('node_selected',this.node_info_log.bind(this));
} }
getValue(){ getValue(){
return this.data; return this.user_data;
} }
get_id(){ get_id(){
return this.data[this.idField]; return this.user_data[this.idField];
} }
create_toolbar(){ create_toolbar(){
var toolbar = bricks.extend({}, this.toolbar); var toolbar = bricks.extend({}, this.toolbar);
@ -219,31 +225,120 @@ bricks.Tree = class extends bricks.VScrollPanel {
var d = event.params; var d = event.params;
var node = this; var node = this;
if (this.selected_node){ if (this.selected_node){
d[this.parentField] = this.selected+node.get_id();
node = this.selected_node; node = this.selected_node;
d[this.parentField] = node.get_id();
} }
var jc = new bricks.HttpJson() 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'){ if (desc.widgettype == 'Message'){
var data = desc.options.user_data; var data = desc.options.user_data;
this.build_subnode(node, data); this.append_new_subnode(node, data);
} }
var w = await bricks.widgetBuild(desc, this); var w = await bricks.widgetBuild(desc, this);
w.open();
} }
async create_tree_nodes(node, records){ async create_tree_nodes(node, records){
for (var i=0;i<records.length;i++){ for (var i=0;i<records.length;i++){
this.build_subnode(node, records[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){ build_subnode(node, data){
var n = new bricks.TreeNode(this, node, data); var n = new bricks.TreeNode(this, node, data);
node.container.add_widget(n); node.container.add_widget(n);
} }
async delete_node(){ 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(){ 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){ async get_children_data(node){
@ -255,6 +350,9 @@ bricks.Tree = class extends bricks.VScrollPanel {
if (d.length == 0){ if (d.length == 0){
node.is_leaf = true; node.is_leaf = true;
} else { } else {
this.user_data = {
children:d
}
this.create_tree_nodes(node, d); this.create_tree_nodes(node, d);
} }
} }
@ -266,17 +364,18 @@ bricks.Tree = class extends bricks.VScrollPanel {
} }
} }
node_click_handle(node, event){ node_click_handle(node, event){
if (this.selected_node){
this.node_selected(this.selected_node, false);
}
if (this.selected_node == node){ if (this.selected_node == node){
this.node_selected(false); this.selected_node = null;
} else { } else {
if (this.selected_node){
this.node_selected(this.selected_node, false);
}
this.selected_node = node; this.selected_node = node;
this.node_selected(node, true); this.node_selected(node, true);
} }
} }
node_selected(node, flag){ node_selected(node, flag){
console.log('node_selected():node=', node, flag);
node.selected(flag); node.selected(flag);
var d = { var d = {
node:node, node:node,
@ -284,7 +383,7 @@ bricks.Tree = class extends bricks.VScrollPanel {
id:node.get_id(), id:node.get_id(),
selected:flag selected:flag
} }
this.dispatch('node_selected', node); this.dispatch('node_selected', d);
} }
async node_checked(node, event){ async node_checked(node, event){
var cb = event.target.bricks_widget; var cb = event.target.bricks_widget;
@ -297,169 +396,18 @@ bricks.Tree = class extends bricks.VScrollPanel {
} }
this.dispatch('check_changed', d); this.dispatch('check_changed', d);
} }
} node_info_log(event){
/* if (event.params.selected == false){
在数控件中提供增删改能力
*/
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){
return; return;
} }
this.selected_node.edit(); var node = event.params.node;
} console.log('======node info========');
delete_node(){ console.log('user_data=', node.user_data);
if (! this.selected_node){ console.log('parent=', node.parent_node);
return; console.log('container=', node.container);
} console.log('======node info end========');
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);
} }
} }
bricks.Factory.register('Tree', bricks.Tree); bricks.Factory.register('Tree', bricks.Tree);
bricks.Factory.register('EditableTree', bricks.EditableTree); bricks.Factory.register('EditableTree', bricks.EditableTree);