Select控件标准的几个问题 about esui HOT 29 CLOSED

关于emptyText，我觉得通过empty string value挺好的。

关于staticText，我支持新做一个CommandMenu。不过数据格式建议是Array<Object>

{text:'command1', handler: function () {}}

还有，如果无value的话，handler就只能无参了

from esui.

正好在设计CommandMenu的选项，datasource铁定是Array<Object>的，包含以下参数：

• text：显示的文字
• handler：执行的方法

要不要value是个问题，但如果有value不如有arguments提供给handler更多参数（不一定通过HTML声明的，但HTML肯定也能声明简单的一个类似value的值）。

我是喜欢要参数的话会lib.curry一下handler加上的，就像管事件的on方法我们也不会给设计额外的参数或者scope选项。不过arguments这东西有必要的话，加一下也没啥代价就是了

from esui.

关于emptyText，我觉得通过empty string value挺好的。

其实我没看懂这啥意思……

from esui.

CommandMenu的问题，可以无参先。确实是，有参可以自己玩。

emptyText属性，我觉得，可以干掉。如果datasource里有{name: '请选择', value: ''}，则以该项作为默认显示文字。因为，其实null rawValue对Select的getValue来讲，就是empty string

from esui.

另外一个问题：要不要给下拉框中添加分隔符的方法，就是会出来这样的下拉框

|-----------|
|item 1     |
|item 2     |
|item 3     |
|-----------|
|item 4     |
|item 5     |
|-----------|

我认为从需求上来说这是成立的，也应该有的，我个人意见如下：

• 增加一个选项指定哪些位置要分隔符（反正不许在datasource里声明分隔符位置）
• 分隔符其实是把前一项加相class，用CSS实现的

from esui.

emptyText属性，我觉得，可以干掉

大块人心

from esui.

另外一个问题：要不要给下拉框中添加分隔符的方法，就是会出来这样的下拉框

那天有位同学和我讲过相关需求，我拉他进来看看。我自己也想想

顺便问，现在{Array}datasource中的Object的keys是name和value吧？

from esui.

倒不介意datasource中加点别的类型，关键是加上这个以后，selectedIndex的同步能恶心到死，还要在datasource中先剔除分隔符再计算，不能直接this.datasource[this.selectedIndex]直接拿到东西。所以我就要求把分隔符用另外一个选项来提供：separators: [3, 6, 11]（怎么这么像sublime的rulers配置？）

from esui.

@otakustay @errorrik

关于 emptyText

我觉得它的使用场景很有限，一般都会默认选中一个值。
如果出现提示需求，如选择100个账户中的一个，emptyText 为 “请选择一个账户”，只需显示一次就够了，不存在

“为了保证后续还能回到这个状态，在下拉框中会保留一项”这种场景，提示一次后，他应该知道这个东西是干嘛的。

因此我觉得 单独增加一个 emptyText 配置项比较好，使用者也好理解些。

关于分隔符

erik 说我过相关需求，其实我那个更恶心，是需要以 groupTitle + groupData 的模式显示。。。。做的我好恶心。。。

其实这种需求也是可以理解的，比如从10人中选一个，Select 按男女分两块。

男

x1
x2

x3

女

y1
y2
y3

想想再接着写。。。

from esui.

不懂markdown语法的哭了。。。这排版，唉，就这么着吧

分割符的这种需求导致 datasource 貌似必须有所改动，如

[
{ text: '男', value: [ { text: 'x1', value: "v" }, ... ] }
{ text: '女', value: [ { text: 'x1', value: "v" }, ... ] }
]

就嵌套两层吧，不能再嵌了，需求上我也想不出更变态的情况。。。。

那处理的时候，发现 datasource[index] 的 value 还是个 Array，就用某种className 标识一下吧。。。。

from esui.

其实就是要<optgroup>的功能，这个我理解其应用场景，不过第一期大概实现的希望不大，我们4.20要出成品，最晚也就5月初，实在没精力……

其实这个问题，我最近在思考TreeView的时候也遇到了，很多看起来固定的控件，其实内部有很多的特殊样式需求，比如说，我敢保证未来Select会给你搞出个“里面每一项有个checkbox，可多选”的奇怪需求来。

同样TreeView也有这问题，是展现的？是多选的？每个节点的内容让用户自定义？我想了很多，以至于都睡不好，但也没一个结论。做通用太难，做小核心又要对各需求有足够扩展性依旧太难，让业务线人员去实现一个全新的TreeViewEx又复用不了现在的TreeView的功能就太丑，无论如何都是郁闷的事。这里也就感叹一下，说实在我没啥特别好的办法……

PS：代码前面统一空4格就是标准的markdown格式了

from esui.

现在{Array}datasource中的Object的keys是name和value吧？

现在是text和value，完全参考<option>元素来的，为啥会是name？

from esui.

哈哈，我做组件也是心力憔悴的一塌糊涂啊，还好是我一个人用。。。。

from esui.

"里面每一项有个checkbox，可多选"

Select 确实可能出现这种情况，但这是要避免的，因为用户体验真的不好，用户只是想简单的勾选就完事，不想在里面折腾到底选几个。

我也碰到过这种需求，后来是通过分组管理的功能侧面实现的。一个本身很简单的组件，我觉得要避免把它想的太复杂，如果PM真的说需要，前端也不应该什么都满足，而是通过其他更好的方式来实现

from esui.

现在是text和value，完全参考元素来的，为啥会是name？

http://fe.baidu.com/doc/ecom/std/e-json.text

from esui.

OK我去改……因为CLB用的是text和value，直觉上也正确，直接就用上了

from esui.

我在家看不到，凭记忆输入的url

from esui.

不懂markdown语法的哭了。。。这排版，唉，就这么着吧

@zhujl 去学呗，很简单的，半天功夫而已，而且你还能用Preview看看先。

from esui.

OK我去改……因为CLB用的是text和value，直觉上也正确，直接就用上了

其实text很符合第一直觉。所以，我建议，有text用text，没text用name。

from esui.

就嵌套两层吧，不能再嵌了，需求上我也想不出更变态的情况。。。。
那处理的时候，发现 datasource[index] 的 value 还是个 Array，就用某种className 标识一下吧。。。。

如果要支持嵌套数据结构（无论这期还是下期支持），我觉得都必须构建嵌套带层级的dom结构，不能简单className标识

from esui.

其实这个问题，我最近在思考TreeView的时候也遇到了，很多看起来固定的控件，其实内部有很多的特殊样式需求，比如说，我敢保证未来Select会给你搞出个“里面每一项有个checkbox，可多选”的奇怪需求来。

同样TreeView也有这问题，是展现的？是多选的？每个节点的内容让用户自定义？我想了很多，以至于都睡不好，但也没一个结论。做通用太难，做小核心又要对各需求有足够扩展性依旧太难，让业务线人员去实现一个全新的TreeViewEx又复用不了现在的TreeView的功能就太丑，无论如何都是郁闷的事。这里也就感叹一下，说实在我没啥特别好的办法……

个人意见是：让90%功能容易使用，让剩下10%功能能够通过使用者付出稍大的成本，能够实现。所以我觉得

每个节点的内容让用户自定义是必须要支持的
多选功能可以原生通过属性支持

from esui.

其实text很符合第一直觉。所以，我建议，有text用text，没text用name。

现在是必须这么做了，Dialog里面有用Select，不能让人一起改……

如果要支持嵌套数据结构（无论这期还是下期支持），我觉得都必须构建嵌套带层级的dom结构，不能简单className标识

如果数据结构是嵌套的，DOM一定是嵌套的。我这里 用className 特指的是 仅加分隔符 的情况，完全可以在元素上通过className + border造出来

每个节点的内容让用户自定义是必须要支持的

所以TreeView的UI标准基本是要大改的了，周末我慢慢想吧

from esui.

仅分隔符，我觉得＋一个separators属性挺好。虽然难拼写了点。。。。。。所以，如果有更好的命名最好

group如果赶不及，就future feature吧

from esui.

可以搞一套基础UI，然后加一套扩展UI，比如 MultiSelect 这样的奇葩。。。

from esui.

separator我准备去加，另外看了上面 @zhujl 的emptyText的解释，我发现以前对这个属性的认识是错误的。

现在来看，emptyText更像是placeholder的作用，因此对于Select来说：

1. 一开始显示的是emptyText，selectedIndex为-1，value为空字符串
2. 打开选择框后如果不选择任何东西关闭，则依旧显示emptyText，且selectedIndex为-1，value为空字符串
3. 在运行期动态改变了datasource，且没有同时给value、rawValue、selectedIndex这三个属性之一，则显示回到emptyText，selectedIndex设为-1，value设为空字符串

现在我觉得emptyText还是需要的，只不过要提供对空值的支持（值为空或空字符串时，默认选中第一项），这个我会去实现

from esui.

我已经在 cda00a5 中实现了text和name属性的兼容，后续处理的：

• 加上emptyText
• 允许用户自定义每一项的显示方式，使用一个itemTemplate和getItemHTML来做扩展，这样方便每一项前面有个图标啥的

from esui.

在 dc1b434 中增加了itmeTemplate和getItemHTML，用来自定义下拉框中的每一项，比如加一个图标啥的

from esui.

在 32c1fc5 中增加了emptyText的支持

以下情况下，selectedIndex会是-1，value和rawValue会是空字符串，同时界面上显示emptyText：

• 创建时没给value、rawValue或selectedIndex
• 创建或更新时，给的value、rawValue或selectedIndex不在datasource范围内
• 修改了datasource，导致原来选中的项不在新的datasource中

当以上情况出现时，如果emptyText为空，则会选中第一项

至此Select想着的东西告一段落，分组的事下一期再考虑。Issue继续保留至周一晚上18:00，如无进一步反馈就关

from esui.

关，后续单独发标准文档Review

from esui.