This commit is contained in:
yumoqing 2024-05-20 18:16:38 +08:00
parent 624a299c19
commit 2df5098bd7
3 changed files with 166 additions and 43 deletions

View File

@ -13,50 +13,89 @@ bricks.Menu = class extends bricks.VBox {
this.dom_element.style.position = "absolute";
this.dom_element.style.backgroundColor = options.bgcolor || "white";
this.dom_element.style.zIndex = "1000";
this.create_children(this.dom_element, this.opts.items);
this.create_children(this, this.opts.items);
this.bind('click', this.menu_clicked);
}
create_submenu_container(){
let cp = document.createElement('div');
cp.style.marginLeft = "15px";
cp.style.display = 'none';
let cp = new bricks.VBox({});
cp.set_style('marginLeft', "15px");
cp.set_style('display', 'none');
return cp;
}
async menu_clicked(event){
let mit = event.target;
if (mit.children.length > 0){
for (var i=0;i<mit.children.length; i++){
if (mit.children[i].style.display == 'none'){
mit.children[i].style.display = "";
} else {
mit.children[i].style.display = 'none';
let e = event.target;
var item = e.bricks_widget;
console.log('menu_clicked(): item=', item, item.opts, item.url);
if (!item.url){
console.log('itme.url is null');
return;
}
var t = bricks.getWidgetById(this.target);
if (t){
var desc = {
"widgettype":"urlwidget",
"options":{
"url":item.url
}
}
return
var w = await bricks.widgetBuild(desc, this);
if (w){
t.clear_widgets();
t.add_widget(w);
} else {
console.log('menu_clicked():widgetBuild() failed', desc);
}
} else {
console.log('menu_clicked():', this.target, 'not found')
}
bricks.debug('item clicked');
}
create_children(p, items){
bricks.debug('create_children():items=', items, 'p=', p);
create_children(w, items){
for (let i=0;i<items.length;i++){
let item = items[i];
let menu_item = this.create_menuitem(item);
p.appendChild(menu_item);
let subw = this.create_menuitem(item);
w.add_widget(subw);
if (item.hasOwnProperty('items')){
let cp = this.create_submenu_container();
menu_item.appendChild(cp);
this.create_children(cp, item.items);
let w1 = this.create_submenu_container();
subw.add_widget(w1);
this.create_children(w1, item.items);
subw.bind('click', this.toggle_hide.bind(this));
} else {
subw.bind('click', this.menu_clicked.bind(this))
}
}
}
create_menuitem(item){
let i18n = bricks.app.i18n;
bricks.debug('i18n=', i18n);
let e = document.createElement('div');
e.textContent = i18n._(item.label || item.name);
// e.description = item
bricks.debug('create_menuitem():item=', item, 'obj=', e);
return e;
var w = new bricks.HBox({});
var iw, tw;
if (item.icon){
iw = new bricks.Icon({url:item.icon});
} else {
iw = new bricks.BlankIcon({});
}
w.add_widget(iw);
tw = new bricks.Text({
otext:item.label,
i18n:true,
wrap:true,
haligin:'left'
});
tw.set_css('filler');
w.add_widget(tw);
for (var k in item){
if (item.hasOwnProperty(k)){
w[k] = item[k];
}
}
iw.bind('click', this.regen_menuitem_event.bind(this, w));
tw.bind('click', this.regen_menuitem_event.bind(this, w));
iw.menuitem = w;
tw.menuitem = w;
return w;
}
regen_menuitem_event(item, event){
console.log('regen_menuitem_event()', item);
item.dispatch('click', item);
event.stopPropagation();
}
}

View File

@ -178,9 +178,8 @@ bricks.ModalForm = class extends bricks.Modal {
bl, bc, br )
title:
description:
dataurl:
submit_url:
fields:
user_data:
}
*/
constructor(opts){
@ -191,12 +190,18 @@ bricks.ModalForm = class extends bricks.Modal {
var opts = {
title:this.opts.title,
description:this.opts.description,
dataurl:this.opts.dataurl,
submit_url:this.opts.submit_url,
fields:this.opts.fields
}
this.form = new bricks.Form(opts);
this.form.bind('submit', this.dismiss.bind(this));
this.add_widget(this.form);
this.form.bind('submit', this.form_submitted.bind(this));
this.form.bind('cancel', this.dismiss.bind(this))
this.open();
}
form_submitted(){
var d = this.form.getValue();
this.dispatch('submit', d)
this.dismiss();
}
}
bricks.Factory.register('Modal', bricks.Modal);

View File

@ -34,6 +34,12 @@ bricks.TreeNode = class extends bricks.VBox {
this.container.hide();
}
}
getValue(){
return this.data;
}
get_id(){
return this.data[this.tree.idField];
}
selected(flg){
if (flg){
this.str_w.set_css('selected');
@ -82,6 +88,11 @@ bricks.TreeNode = class extends bricks.VBox {
this.trigle.bind('state_changed', this.toggleExpandCollapse.bind(this));
widget.add_widget(this.trigle);
}
if (this.tree.checkable){
this.check_w = new bricks.Check({name:'check'});
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 icon = objget(TypeIcons, dtype);
if (!icon && this.tree.opts.default_type){
@ -95,8 +106,7 @@ bricks.TreeNode = class extends bricks.VBox {
});
widget.add_widget(img);
var txt = this.data[this.tree.opts.textField];
widget.add_widget(
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.bind('blur', this.edit_handle.bind(this));
widget.add_widget(this.str_w);
@ -153,6 +163,7 @@ bricks.Tree = class extends bricks.VScrollPanel {
this.multitype_tree = this.opts.multitype_tree||false;
this.selected_node = null;
this.create_toolbar();
this.checked_nodes = [];
this.container = new bricks.VBox({
"width":"100%",
"height":"auto",
@ -161,26 +172,74 @@ bricks.Tree = class extends bricks.VScrollPanel {
this.add_widget(this.container);
this.data_id = null;
if (this.opts.dataurl){
schedule_once(0.01, this.get_children_data.bind(this, this));
schedule_once(this.get_children_data.bind(this, this), 0.1);
} else {
this.create_node_children(this, this.opts.data);
}
this.create_node_children(this, this.opts.data);
}
create_toolbar(){
var toolbar = bricks.extend({}, this.toolbar);
var tools = [];
toolbar.tools.forEach(f => tools.push(f));
if (toolbar.tools){
toolbar.tools.forEach(f => tools.push(f));
}
if (this.editable){
tools.push({icon:bricks_resource('imgs/add.png'), name:'add'});
tools.push({icon:bricks_resource('imgs/update.png'), name:'update'});
tools.push({icon:bricks_resource('imgs/delete.png'), name:'delete'});
}
if (tools.length == 0){
return;
}
toolbar.tools = tools;
this.toolbar_w = new bricks.IconBar(toolbar);
this.add_widget(this.toolbar_w);
this.toolbar_w.bind('add', this.add_new_node.bind(this));
this.toolbar_w.bind('delete', this.delete.bind(this));
this.toolbar_w.bind('delete', this.delete_node.bind(this));
this.toolbar_w.bind('update', this.update_node.bind(this));
}
async add_new_node(){
var w = new bricks.ModalForm({
target:this,
"width":"80%",
"height":"80%",
title:'add new node',
fields:this.editable.fields
});
w.bind('submit', this.new_node_inputed.bind(this))
}
async new_node_inputed(event){
var d = event.params;
var node = this;
if (this.selected_node){
d[this.parentField] = this.selected+node.get_id();
node = this.selected_node;
}
var jc = new bricks.HttpJson()
var desc = jc.post(this.editable.add_url, {params:d});
if (desc.widgettype == 'Message'){
var data = desc.options.user_data;
this.build_subnode(node, data);
}
var w = await bricks.widgetBuild(desc, this);
}
async create_tree_nodes(node, records){
for (var i=0;i<records.length;i++){
this.build_subnode(node, records[i]);
}
}
build_subnode(node, data){
var n = new bricks.TreeNode(this, node, data);
node.container.add_widget(n);
}
async delete_node(){
}
async update_node(){
}
async get_children_data(node){
var jcall = bricks.jcall;
var d = await jcall(this.opts.dataurl,{
@ -194,6 +253,7 @@ bricks.Tree = class extends bricks.VScrollPanel {
}
}
create_node_children(node, data){
if(!data) return;
for (var i=0; i<data.length; i++){
var n = new bricks.TreeNode(this, node, data[i]);
node.container.add_widget(n);
@ -201,17 +261,36 @@ bricks.Tree = class extends bricks.VScrollPanel {
}
node_click_handle(node, event){
if (this.selected_node == node){
this.selected_node.selected(false);
this.selected_node = node;
this.node_selected(false);
} else {
if (this.selected_node){
this.selected_node.selected(false);
this.node_selected(this.selected_node, false);
}
this.selected_node = node;
node.selected(true);
this.dispatch('node_selected', node);
this.node_selected(node, true);
}
}
node_selected(node, flag){
node.selected(flag);
var d = {
node:node,
data:node.getValue(),
id:node.get_id(),
selected:flag
}
this.dispatch('node_selected', node);
}
async node_checked(node, event){
var cb = event.target.bricks_widget;
var stat = cb.getValue().check;
var d = {
node:node,
data:node.getValue(),
id: node.get_id(),
check_stat:stat
}
this.dispatch('check_changed', d);
}
}
/*
在数控件中提供增删改能力