Listbox动态添加Template

收藏

如何在js层动态给listbox内添加Template控件比如inputNumber，combobox之类的
如果可以的话能给个sample吗

现代码如下
画面测：<div id="listbox1" style="height:150px;width:250px;"></div>
JS测：this.listbox1 = new wijmo.input.ListBox('#listbox1');

Alice · Alice

回复 1楼lingee的帖子

使用AngularJS框架，可以直接的给ListBox设置模板，使用WjItemTemplate 类。
代码参考和该类的接口请参考产品文档：
http://wijmo.com/5/docs/topic/wi ... Template.Class.html

lingee · lingee

如果不允许使用AngularJS框架呢？能做到吗？

Alice · Alice

回复 3楼lingee的帖子

可以通过itemFormatter功能拿到HTML，可以自定义格式化listbox。
itemFormatter接口和使用代码，请参考产品文档：
http://wijmo.gcpowertools.com.cn ... .ListBox.Class.html

lingee · lingee

抱歉那个文档网页打不开。。。。

lingee · lingee

请问有没有可参考的实例？

Alice · Alice

回复 5楼lingee的帖子

你可以试试如下链接：
http://wijmo.gcpowertools.com.cn/5/docs/
选择Input->ListBox查看接口。
有代码的演示如何获取到HTML，至于HTML的操作可以在网上查到相关资料。
也可以参考C1FlexGrid的itemFormatter使用示例，使用方法类似：
http://blog.gcpowertools.com.cn/ ... d_customeditor.aspx

lingee · lingee

通过itemFormatter功能确实可以实现
测试代码如下：
<定义>
this.list1= new wijmo.input.ListBox('#list1);
this.list1.checkedMemberPath = null;
this.list1.isContentHtml = true;
this.list1.DataItems = [{ Code: '001' },{ Code: '002'}];
<初期化>
this.list1.itemFormatter = customItemFormatter.bind(this);
function customItemFormatter(index, content) {
content = '<label wj-part="lblBankCdv' + index + '">银行' + (index + 1) + ':</label><input type="text" wj-part="txtBankNmv' + index + '"></input>';
return content;
}

可是如果我需要添加的listbox项目不单单是textbox，比如用ComboBox、InputDate，这些又该怎么添加？
我试了动态新加一个日期控件
var editorRoot = document.createElement(('dateTemp' + index));
var input = new wijmo.input.InputDate(editorRoot);
不知道该怎么加到listbox的项目中去，可以指导下吗？

Alice · Alice

lingee 发表于 2016-3-7 16:30
通过itemFormatter功能确实可以实现
测试代码如下：

你已经在DOM元素中添加了一个Input，获取到这个DOM元素的Input节点，初始化Input为InputDate就可以了。
产品博客有类似的可以参考：
http://blog.gcpowertools.com.cn/ ... d_customeditor.aspx

lingee · lingee

这个参考的例子是flexgrid的还是有点区别的吧~ 不好意思，第一次接触wijmo，还是不太明白。。。如何能够取到这个DOM元素的Input节点？能就我的测试代码说明下吗？实在不好意思。

		自动登录	找回密码
密码			立即注册

Listbox动态添加Template

16 个回复

活字格认证

微信认证勋章

元老葡萄