forked from fanruan/fineui
windy
6 years ago
23 changed files with 4655 additions and 183 deletions
@ -0,0 +1,54 @@ |
|||||||
|
/** |
||||||
|
* 简单的复选下拉树控件, 适用于数据量少的情况, 可以自增值 |
||||||
|
* |
||||||
|
* Created by GUY on 2015/10/29. |
||||||
|
* @class BI.TreeValueChooserInsertCombo |
||||||
|
* @extends BI.Widget |
||||||
|
*/ |
||||||
|
BI.TreeValueChooserInsertCombo = BI.inherit(BI.AbstractTreeValueChooser, { |
||||||
|
|
||||||
|
_defaultConfig: function () { |
||||||
|
return BI.extend(BI.TreeValueChooserInsertCombo.superclass._defaultConfig.apply(this, arguments), { |
||||||
|
baseCls: "bi-tree-value-chooser-insert-combo", |
||||||
|
width: 200, |
||||||
|
height: 24, |
||||||
|
items: null, |
||||||
|
itemsCreator: BI.emptyFn |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function () { |
||||||
|
BI.TreeValueChooserInsertCombo.superclass._init.apply(this, arguments); |
||||||
|
var self = this, o = this.options; |
||||||
|
if (BI.isNotNull(o.items)) { |
||||||
|
this._initData(o.items); |
||||||
|
} |
||||||
|
this.combo = BI.createWidget({ |
||||||
|
type: "bi.multi_tree_insert_combo", |
||||||
|
element: this, |
||||||
|
itemsCreator: BI.bind(this._itemsCreator, this), |
||||||
|
valueFormatter: BI.bind(this._valueFormatter, this), |
||||||
|
width: o.width, |
||||||
|
height: o.height |
||||||
|
}); |
||||||
|
|
||||||
|
this.combo.on(BI.MultiTreeCombo.EVENT_CONFIRM, function () { |
||||||
|
self.fireEvent(BI.TreeValueChooserInsertCombo.EVENT_CONFIRM); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
setValue: function (v) { |
||||||
|
this.combo.setValue(v); |
||||||
|
}, |
||||||
|
|
||||||
|
getValue: function () { |
||||||
|
return this.combo.getValue(); |
||||||
|
}, |
||||||
|
|
||||||
|
populate: function (items) { |
||||||
|
this._initData(items); |
||||||
|
this.combo.populate.apply(this.combo, arguments); |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.TreeValueChooserInsertCombo.EVENT_CONFIRM = "TreeValueChooserInsertCombo.EVENT_CONFIRM"; |
||||||
|
BI.shortcut("bi.tree_value_chooser_insert_combo", BI.TreeValueChooserInsertCombo); |
||||||
@ -0,0 +1,286 @@ |
|||||||
|
/** |
||||||
|
* 可以往当前选中节点下添加新值的下拉树 |
||||||
|
* @class BI.MultiTreeInsertCombo |
||||||
|
* @extends BI.Single |
||||||
|
*/ |
||||||
|
|
||||||
|
BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { |
||||||
|
|
||||||
|
constants: { |
||||||
|
offset: { |
||||||
|
top: 0, |
||||||
|
left: 0, |
||||||
|
right: 0, |
||||||
|
bottom: 25 |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_defaultConfig: function () { |
||||||
|
return BI.extend(BI.MultiTreeInsertCombo.superclass._defaultConfig.apply(this, arguments), { |
||||||
|
baseCls: "bi-multi-tree-insert-combo", |
||||||
|
itemsCreator: BI.emptyFn, |
||||||
|
valueFormatter: BI.emptyFn, |
||||||
|
height: 24 |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function () { |
||||||
|
BI.MultiTreeInsertCombo.superclass._init.apply(this, arguments); |
||||||
|
|
||||||
|
var self = this, o = this.options; |
||||||
|
|
||||||
|
var isInit = false; |
||||||
|
var want2showCounter = false; |
||||||
|
|
||||||
|
this.storeValue = {value: o.value || {}}; |
||||||
|
|
||||||
|
this.trigger = BI.createWidget({ |
||||||
|
type: "bi.multi_select_trigger", |
||||||
|
height: o.height, |
||||||
|
valueFormatter: o.valueFormatter, |
||||||
|
// adapter: this.popup,
|
||||||
|
masker: { |
||||||
|
offset: this.constants.offset |
||||||
|
}, |
||||||
|
searcher: { |
||||||
|
type: "bi.multi_tree_searcher", |
||||||
|
itemsCreator: o.itemsCreator, |
||||||
|
popup: { |
||||||
|
type: "bi.multi_tree_search_insert_pane", |
||||||
|
listeners: [{ |
||||||
|
eventName: BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, |
||||||
|
action: function () { |
||||||
|
self.storeValue.value[self.trigger.getSearcher().getKeyword()] = {}; |
||||||
|
self._assertShowValue(); |
||||||
|
// setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了
|
||||||
|
self.combo.setValue(self.storeValue); |
||||||
|
self.trigger.stopEditing(); |
||||||
|
} |
||||||
|
}] |
||||||
|
} |
||||||
|
}, |
||||||
|
switcher: { |
||||||
|
el: { |
||||||
|
type: "bi.multi_tree_check_selected_button" |
||||||
|
}, |
||||||
|
popup: { |
||||||
|
type: "bi.multi_tree_check_pane", |
||||||
|
itemsCreator: o.itemsCreator |
||||||
|
} |
||||||
|
}, |
||||||
|
value: {value: o.value || {}} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
this.combo = BI.createWidget({ |
||||||
|
type: "bi.combo", |
||||||
|
toggle: false, |
||||||
|
container: o.container, |
||||||
|
el: this.trigger, |
||||||
|
adjustLength: 1, |
||||||
|
popup: { |
||||||
|
type: "bi.multi_tree_popup_view", |
||||||
|
ref: function () { |
||||||
|
self.popup = this; |
||||||
|
self.trigger.setAdapter(this); |
||||||
|
}, |
||||||
|
listeners: [{ |
||||||
|
eventName: BI.MultiTreePopup.EVENT_AFTERINIT, |
||||||
|
action: function () { |
||||||
|
self.trigger.getCounter().adjustView(); |
||||||
|
isInit = true; |
||||||
|
if (want2showCounter === true) { |
||||||
|
showCounter(); |
||||||
|
} |
||||||
|
} |
||||||
|
}, { |
||||||
|
eventName: BI.MultiTreePopup.EVENT_CHANGE, |
||||||
|
action: function () { |
||||||
|
change = true; |
||||||
|
var val = { |
||||||
|
type: BI.Selection.Multi, |
||||||
|
value: this.hasChecked() ? this.getValue() : {} |
||||||
|
}; |
||||||
|
self.trigger.getSearcher().setState(val); |
||||||
|
self.trigger.getCounter().setButtonChecked(val); |
||||||
|
} |
||||||
|
}, { |
||||||
|
eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM, |
||||||
|
action: function () { |
||||||
|
self.combo.hideView(); |
||||||
|
} |
||||||
|
}, { |
||||||
|
eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR, |
||||||
|
action: function () { |
||||||
|
clear = true; |
||||||
|
self.setValue(); |
||||||
|
self._defaultState(); |
||||||
|
} |
||||||
|
}], |
||||||
|
itemsCreator: o.itemsCreator, |
||||||
|
onLoaded: function () { |
||||||
|
BI.nextTick(function () { |
||||||
|
self.trigger.getCounter().adjustView(); |
||||||
|
self.trigger.getSearcher().adjustView(); |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
value: {value: o.value || {}}, |
||||||
|
hideChecker: function (e) { |
||||||
|
return triggerBtn.element.find(e.target).length === 0; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
var change = false; |
||||||
|
var clear = false; // 标识当前是否点击了清空
|
||||||
|
|
||||||
|
var isSearching = function () { |
||||||
|
return self.trigger.getSearcher().isSearching(); |
||||||
|
}; |
||||||
|
|
||||||
|
var isPopupView = function () { |
||||||
|
return self.combo.isViewVisible(); |
||||||
|
}; |
||||||
|
|
||||||
|
this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { |
||||||
|
self.storeValue = {value: self.combo.getValue()}; |
||||||
|
this.setValue(self.storeValue); |
||||||
|
}); |
||||||
|
this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { |
||||||
|
self.storeValue = {value: this.getValue()}; |
||||||
|
self.combo.setValue(self.storeValue); |
||||||
|
BI.nextTick(function () { |
||||||
|
if (isPopupView()) { |
||||||
|
self.combo.populate(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
function showCounter () { |
||||||
|
if (isSearching()) { |
||||||
|
self.storeValue = {value: self.trigger.getValue()}; |
||||||
|
} else if (isPopupView()) { |
||||||
|
self.storeValue = {value: self.combo.getValue()}; |
||||||
|
} |
||||||
|
self.trigger.setValue(self.storeValue); |
||||||
|
} |
||||||
|
|
||||||
|
this.trigger.on(BI.MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () { |
||||||
|
if (want2showCounter === false) { |
||||||
|
want2showCounter = true; |
||||||
|
} |
||||||
|
if (isInit === true) { |
||||||
|
want2showCounter = null; |
||||||
|
showCounter(); |
||||||
|
} |
||||||
|
}); |
||||||
|
this.trigger.on(BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK, function () { |
||||||
|
self.combo.toggle(); |
||||||
|
}); |
||||||
|
this.trigger.on(BI.MultiSelectTrigger.EVENT_COUNTER_CLICK, function () { |
||||||
|
if (!self.combo.isViewVisible()) { |
||||||
|
self.combo.showView(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function () { |
||||||
|
var checked = this.getSearcher().hasChecked(); |
||||||
|
var val = { |
||||||
|
type: BI.Selection.Multi, |
||||||
|
value: checked ? {1: 1} : {} |
||||||
|
}; |
||||||
|
this.getSearcher().setState(checked ? BI.Selection.Multi : BI.Selection.None); |
||||||
|
this.getCounter().setButtonChecked(val); |
||||||
|
}); |
||||||
|
|
||||||
|
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { |
||||||
|
if (isSearching()) { |
||||||
|
return; |
||||||
|
} |
||||||
|
if (change === true) { |
||||||
|
self.storeValue = {value: self.combo.getValue()}; |
||||||
|
change = false; |
||||||
|
} |
||||||
|
self.combo.setValue(self.storeValue); |
||||||
|
self.populate(); |
||||||
|
|
||||||
|
}); |
||||||
|
this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () { |
||||||
|
if (isSearching()) { |
||||||
|
self.trigger.stopEditing(); |
||||||
|
self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CONFIRM); |
||||||
|
} else { |
||||||
|
if (isPopupView()) { |
||||||
|
self.trigger.stopEditing(); |
||||||
|
self.storeValue = {value: self.combo.getValue()}; |
||||||
|
if (clear === true) { |
||||||
|
self.storeValue = {value: {}}; |
||||||
|
} |
||||||
|
self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CONFIRM); |
||||||
|
} |
||||||
|
} |
||||||
|
clear = false; |
||||||
|
change = false; |
||||||
|
}); |
||||||
|
|
||||||
|
var triggerBtn = BI.createWidget({ |
||||||
|
type: "bi.trigger_icon_button", |
||||||
|
width: o.height, |
||||||
|
height: o.height, |
||||||
|
cls: "multi-select-trigger-icon-button" |
||||||
|
}); |
||||||
|
triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { |
||||||
|
self.trigger.getCounter().hideView(); |
||||||
|
if (self.combo.isViewVisible()) { |
||||||
|
self.combo.hideView(); |
||||||
|
} else { |
||||||
|
self.combo.showView(); |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.absolute", |
||||||
|
element: this, |
||||||
|
items: [{ |
||||||
|
el: this.combo, |
||||||
|
left: 0, |
||||||
|
right: 0, |
||||||
|
top: 0, |
||||||
|
bottom: 0 |
||||||
|
}, { |
||||||
|
el: triggerBtn, |
||||||
|
right: 0, |
||||||
|
top: 0, |
||||||
|
bottom: 0 |
||||||
|
}] |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_assertShowValue: function () { |
||||||
|
this.trigger.getSearcher().setState(this.storeValue); |
||||||
|
this.trigger.getCounter().setButtonChecked(this.storeValue); |
||||||
|
}, |
||||||
|
|
||||||
|
_defaultState: function () { |
||||||
|
this.trigger.stopEditing(); |
||||||
|
this.combo.hideView(); |
||||||
|
}, |
||||||
|
|
||||||
|
setValue: function (v) { |
||||||
|
this.storeValue.value = v || {}; |
||||||
|
this.combo.setValue({ |
||||||
|
value: v || {} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
getValue: function () { |
||||||
|
return this.storeValue.value; |
||||||
|
}, |
||||||
|
|
||||||
|
populate: function () { |
||||||
|
this.combo.populate.apply(this.combo, arguments); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
BI.MultiTreeInsertCombo.EVENT_CONFIRM = "MultiTreeInsertCombo.EVENT_CONFIRM"; |
||||||
|
|
||||||
|
BI.shortcut("bi.multi_tree_insert_combo", BI.MultiTreeInsertCombo); |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
/** |
||||||
|
* |
||||||
|
* 在搜索框中输入文本弹出的面板 |
||||||
|
* @class BI.MultiTreeSearchInsertPane |
||||||
|
* @extends BI.Pane |
||||||
|
*/ |
||||||
|
|
||||||
|
BI.MultiTreeSearchInsertPane = BI.inherit(BI.Widget, { |
||||||
|
|
||||||
|
constants: { |
||||||
|
height: 24, |
||||||
|
}, |
||||||
|
|
||||||
|
props: { |
||||||
|
baseCls: "bi-multi-tree-search-insert-pane bi-card", |
||||||
|
itemsCreator: BI.emptyFn, |
||||||
|
keywordGetter: BI.emptyFn |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
var self = this, opts = this.options; |
||||||
|
|
||||||
|
return { |
||||||
|
type: "bi.vertical", |
||||||
|
items: [{ |
||||||
|
type: "bi.text_button", |
||||||
|
invisible: true, |
||||||
|
ref: function (_ref) { |
||||||
|
self.addTip = _ref; |
||||||
|
}, |
||||||
|
text: BI.i18nText("BI-Basic_Click_To_Add_Text", ""), |
||||||
|
height: this.constants.height, |
||||||
|
cls: "bi-high-light", |
||||||
|
hgap: 5, |
||||||
|
handler: function () { |
||||||
|
self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, opts.keywordGetter()); |
||||||
|
} |
||||||
|
}, { |
||||||
|
type: "bi.part_tree", |
||||||
|
tipText: BI.i18nText("BI-No_Select"), |
||||||
|
itemsCreator: function (op, callback) { |
||||||
|
op.keyword = opts.keywordGetter(); |
||||||
|
opts.itemsCreator(op, function (res) { |
||||||
|
callback(res); |
||||||
|
self.setKeyword(opts.keywordGetter(), res.items); |
||||||
|
}); |
||||||
|
}, |
||||||
|
ref: function (_ref) { |
||||||
|
self.partTree = _ref; |
||||||
|
}, |
||||||
|
value: opts.value, |
||||||
|
listeners: [{ |
||||||
|
eventName: BI.Controller.EVENT_CHANGE, |
||||||
|
action: function () { |
||||||
|
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
||||||
|
} |
||||||
|
}, { |
||||||
|
eventName: BI.TreeView.EVENT_CHANGE, |
||||||
|
action: function () { |
||||||
|
self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_CHANGE); |
||||||
|
} |
||||||
|
}] |
||||||
|
}] |
||||||
|
}; |
||||||
|
}, |
||||||
|
|
||||||
|
setKeyword: function (keyword, nodes) { |
||||||
|
var isAddTipVisible = BI.isEmptyArray(nodes); |
||||||
|
this.addTip.setVisible(isAddTipVisible); |
||||||
|
this.partTree.setVisible(!isAddTipVisible); |
||||||
|
isAddTipVisible && this.addTip.setText(BI.i18nText("BI-Basic_Click_To_Add_Text", keyword)); |
||||||
|
}, |
||||||
|
|
||||||
|
hasChecked: function () { |
||||||
|
return this.partTree.hasChecked(); |
||||||
|
}, |
||||||
|
|
||||||
|
setValue: function (v) { |
||||||
|
this.setSelectedValue(v.value); |
||||||
|
}, |
||||||
|
|
||||||
|
setSelectedValue: function (v) { |
||||||
|
v || (v = {}); |
||||||
|
this.partTree.setSelectedValue(v); |
||||||
|
}, |
||||||
|
|
||||||
|
getValue: function () { |
||||||
|
return this.partTree.getValue(); |
||||||
|
}, |
||||||
|
|
||||||
|
empty: function () { |
||||||
|
this.partTree.empty(); |
||||||
|
}, |
||||||
|
|
||||||
|
populate: function (op) { |
||||||
|
this.partTree.stroke.apply(this.partTree, arguments); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
BI.MultiTreeSearchInsertPane.EVENT_CHANGE = "EVENT_CHANGE"; |
||||||
|
|
||||||
|
BI.MultiTreeSearchInsertPane.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; |
||||||
|
BI.MultiTreeSearchInsertPane.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; |
||||||
|
BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; |
||||||
|
|
||||||
|
BI.shortcut("bi.multi_tree_search_insert_pane", BI.MultiTreeSearchInsertPane); |
||||||
Loading…
Reference in new issue