WijmoJS 中自定义 React 菜单和列表项模板
WijmoJS 中自定义 React 菜单和列表项模板
在V2019.0 Update2 的全新版本中,React 框架下 WijmoJS 的前端UI组件功能再度增强。
WijmoJS的菜单和类似列表的控件(ListBox、ComboBox、MultiSelect)允许用户在 formatItem 事件中使用 JS 代码和 DOM API 为每个项目生成元素树,从而自定制项目的内容。在和 React 框架深度结合后,在 JSX 标记中使用 React 组件及其属性绑定将会更加方便,即,以声明方式定义项目内容。
在 WijmoJS 的新版本中,我们为 WijmoJS React Interop 添加了两个特殊的功能项:
l 对于 Menu,我们添加了 MenuItem 和 MenuSeparator 子组件,它允许您在JSX中以声明方式定义菜单项和分隔符
l 对于所有类似列表的控件(ListBox、ComboBox、MultiSelect、Menu),我们添加了特殊的 wjItemTemplate 渲染道具,它允许您指定绘制项目内容的渲染函数。
React 菜单项(List Items)
纯javascript菜单控件假定其菜单项是在绑定到控件项源属性的数组中定义的,即,项目在React组件的模型部分中定义。但这并不是最佳选项,实际上菜单项与组件的UI关系更为紧密,因此,使用React UI方法(即JSX标记)定义它们会更方便。
使用WijmoJS,您可以通过 @ grapecity/wijmo.react.input 模块中的新MenuItem组件快速实现菜单项目定义:在渲染函数的JSX标记中使用嵌套到其Menu部分的MenuItem组件,而不是在数组中定义项目,其中每个MenuItem定义一个单独的菜单项,其内容具有任意复杂性。
此外,使用MenuSeparator组件还可用于在菜单项之间插入分隔符。例如,此示例中的以下jsx代码定义了具有丰富内容的菜单项目,并在退出项之前使用分隔符:
```
<wjInput.Menu
header="File"
itemClicked={this.menuItemClicked}>
<wjInput.MenuItem>
<span className="glyphicon glyphicon-asterisk"></span>
<b>New</b>
<br />
<small><i>create a new file</i></small>
</wjInput.MenuItem>
<wjInput.MenuItem>
<span className="glyphicon glyphicon-folder-open"></span>
<b>Open</b>
<br />
<small><i>open an existing file or folder</i></small>
</wjInput.MenuItem>
<wjInput.MenuItem>
<span className="glyphicon glyphicon-floppy-disk"></span>
<b>Save</b>
<br />
<small><i>save the current file</i></small>
</wjInput.MenuItem>
<wjInput.MenuSeparator></wjInput.MenuSeparator>
<wjInput.MenuItem>
<span className="glyphicon glyphicon-remove"></span>
<b>Exit</b>
<br />
<small><i>exit the application</i></small>
</wjInput.MenuItem>
</wjInput.Menu>
```
您还可以从定义其数据的数据源中,动态生成多个MenuItem。
例如下方代码实现了:调色板数组映射到表示其数据的MenuItem数组中:
```
<wjInput.Menu
header="Palette"
maxDropDownHeight={300}
value={this.state.thePalette}>
{this.palettes.map((value) => {
return <wjInput.MenuItem value={value.name}>
{value.name}
<span style={{float:'right'}}>
{value.colors.map((color) => {
return <div style={{
backgroundColor: color,
display:'inline',
padding:'2px',
height:'10px',
width:'3px'}}>
</div>
})}
</span>
</wjInput.MenuItem>
})}
</wjInput.Menu>
```
请注意,此处的Menu组件未使用其itemsSource属性绑定数据数组。相反,它直接从数据数组中生成子MenuItem组件。
命令(Commands)
您现在可以用声明的方式,定义绑定带参数/命令的菜单项。MenuItem组件从其接口中公开了cmd和cmdParam属性,这些属性可以分别绑定命令及其参数。
下面的代码示例演示了:如何使用这些属性来定义递增或递减的菜单项。其中,每个项目表示作为命令参数指定的不同增量值:
```
<wjInput.Menu
header="Tax Commands"
id="changeTax"
command={this.state.command}>
<wjInput.MenuItem cmd={this.state.command} cmdParam={0.50}>
Increment by 50%
</wjInput.MenuItem>
<wjInput.MenuItem cmd={this.state.command} cmdParam={0.25}>
Increment by 25%
</wjInput.MenuItem>
<wjInput.MenuItem cmd={this.state.command} cmdParam={0.05}>
Increment by 5%
</wjInput.MenuItem>
<wjInput.MenuSeparator></wjInput.MenuSeparator>
<wjInput.MenuItem cmd={this.state.command} cmdParam={-0.05}>
Decrement by 5%
</wjInput.MenuItem>
<wjInput.MenuItem cmd={this.state.command} cmdParam={-0.25}>
Decrement by 25%
</wjInput.MenuItem>
<wjInput.MenuItem cmd={this.state.command} cmdParam={-0.50}>
Decrement by 50%
</wjInput.MenuItem>
</wjInput.Menu>
```
值选择器(Value Picker)
随着MenuItem组件的引入,Menu现在可以用作值选择器。MenuItem组件的value属性包含了与该项关联的值。
WijmoJS 的菜单本身就具有value属性,其值显示在菜单标题旁边,其属性可以绑定到父组件状态,而其中的itemClicked事件可用于更新与所选菜单项关联值的状态。此示例演示了可用于选择浏览器名称的菜单:
```
render() {
return <wjInput.Menu
header="Run"
value={this.state.browser}
itemClicked={this.splitButtonItemClicked}>
<wjInput.MenuItem value="IE">Internet Explorer</wjInput.MenuItem>
<wjInput.MenuItem value="Chrome">Chrome</wjInput.MenuItem>
<wjInput.MenuItem value="FF">FireFox</wjInput.MenuItem>
<wjInput.MenuItem value="Safari">Safari</wjInput.MenuItem>
<wjInput.MenuItem value="Opera">Opera</wjInput.MenuItem>
</wjInput.Menu>
}
splitButtonItemClicked = (menu) => {
this.setState({
browser: menu.selectedItem.value
});
};
```
项目模板(Item Templates)
您可以使用formatItem事件为纯JS的列表类控件创建自定义项目内容,如ListBox、ComboBox、MultiSelect和Menu。相应的React组件允许您使用JSX标记以声明方式定义项目内容。
此外,对于每个提到的组件,WijmoJS都会公开一个名为“wjItemTemplate”的渲染道具,它允许您指定绘制项目内容的渲染函数。例如,此示例演示了:通过标记绘制了一个字形,其名称取自源数组:
```
<wjInput.ListBox
displayMemberPath="country"
itemsSource={this.state.glyphs}
selectedIndexChanged={this.onSelectedIndexChanged}
initialized={this.onInitialized}
wjItemTemplate={(context: wjInput.ItemTemplateContext)=>(
<div>
<div className="wj-glyph">
<span className={`wj-glyph-${context.item}`}></span>
</div>
{context.item}
</div>
)}>
</wjInput.ListBox>
```
注意,wjItemTemplate渲染函数提供了一个上下文参数,该参数用以带来有关当前绘图项的信息对象,它公开了以下属性:
- item - 正在呈现其内容的数据项
- itemIndex - 要呈现的项的索引
- control - 由React组件表示的底层纯JS控件
MultiSelect 组件
MultiSelect组件与其他类似列表的控件相比具备一个显著特征:其每个项目都包含了一个复选框,用于更改项目的已检查状态。
在使用项目模板进行项目自定义时,此功能也可以保留。与往常一样,项目模板中type =“checkbox”的第一个输入元素将用作检查状态开关。
此示例中的代码定义了包含此类复选框的项目模板:
```
<wjInput.MultiSelect
displayMemberPath="name"
headerPath="name"
placeholder="Countries"
itemsSource={this.state.data}
showSelectAllCheckbox={this.state.showSelectAllCheckbox}
checkedItemsChanged={this._onCheckedItemsChanged.bind(this)}
wjItemTemplate={(context: wjInput.ItemTemplateContext)=>(
<div className="item">
<label><input type="checkbox"/>{context.item.name}</label>
<br/>
<b>{context.item.city}</b> ({context.item.state})<br/>
{context.item.address}<br/>
Phone: <b>{context.item.phone}</b><br/>
Fax: <b>{context.item.fax}</b><br/>
Website: <a href="{context.item.site}" target="_blank">{context.item.site}</a><br/>
</div>
)}>
</wjInput.MultiSelect>
```
菜单(Menu)
在上面的介绍中,我们已经向您演示了如何从一组数据项,动态创建MenuItem组件。下面将介绍的wjitemTemplate渲染属性是实现此类功能的另一种方法。
使用此方法,Menu组件应该绑定到一个项目数组中,而wjItemTemplate render prop定义一个用于呈现每个项目的模板。
例如,此示例中的代码片段显示绑定到音乐家数组的菜单的自定义项:
```
header="Artists"
itemClicked={this.menuItemClicked}
itemsSource={this.musicians}
maxDropDownHeight={300}
wjItemTemplate={(context: wjInput.ItemTemplateContext)=>(
<div style={{minWidth: '160px'}}>
{context.itemIndex + 1}. <b>{context.item.name}</b>
{context.item.photo ?
<div>
<img src={context.item.photo} height="50" />
</div>
: null}
</div>
)}>
</wjInput.Menu>
```
结论
WijmoJS全新的MenuItem组件和wjItemTemplate渲染道具,全面提升了WijmoJS列表类组件的自定义扩展能力和便捷性。
毫不夸张的说,使用WijmoJS前端开发工具包,您现在可以通过传统的JSX标记,绑定带有其他应用程序组件的丰富项目,并定义其内容。
关于 WijmoJS 前端开发工具包
WijmoJS 前端开发工具包由多款灵活高效、零依赖、轻量级的纯前端控件组成,如表格控件 FlexGrid、图表控件 FlexChart、数据分析 OLAP 等,完美支持原生 JavaScript,以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架,可用于企业快速构建桌面、移动 Web 应用程序。
借助葡萄城深厚的技术底蕴,WijmoJS 致力于为各领域用户提供更稳定、更高效的前端开发工具。产品自面市以来,已在招商银行、微软 Dynamics 项目、思科、特斯拉、富士通等知名企业中得以成功应用。WijmoJS 凭借其先进的体系架构、简单易学的使用文档、超过 500 种 Demo 演示、顶级的控件性能,以及轻松、易用的操作体验,可全面满足企业前端开发所需,是构建企业级 Web 应用程序最高效的纯前端开发工具包。
WijmoJS 中自定义 React 菜单和列表项模板的更多相关文章
- SharePoint 2013 自定义翻页显示列表项
项目需求:自定义开发一个能分页显示列表项的小部件,允许左右翻页,能根据用户权限来显示管理链接等. 效果如下: 技术要求:使用sharepoint rest API 来获取列表项,这样性能高,能够快速响 ...
- android中RecyclerView控件的列表项横向排列
本文是在上一篇文章的基础上做的修改:android中RecyclerView控件的使用 1.修改列表项news_item.xml:我这里是把新闻标题挪到了新闻图片的下面显示 <?xml vers ...
- Java中自定义枚举(Enum)项的值,可设置为指定的值
一.代码 package base.lang; /** * ClassName: StateEnum * @Description: TODO * @author fuming * @date 20 ...
- Windows Phone 7 ListBox 列表项渐显加载动画学习笔记
在wp7程序中,当程序功能越来越复杂时,性能问题是我们不得不考虑的一个问题.在聊天列表中,如果聊天项过多,而且项目UI组件足够复杂时, 我们不得不想尽办法让UI尽快加载.所以有一种可行的方案,就是像Q ...
- 【UWP】列表项宽度自适应的实现
目的 在UWP开发中,我们常常用到两个显示列表的控件:ListView和GridView.而这两个列表控件在PC等大屏幕上如果能多列"智能"调整自己的大小(通常是根据当前窗口大小调 ...
- 从0开始学FreeRTOS-(列表与列表项)-3
# FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像. 在`FreeRTOS`中,列表与列表项使用得非常多 ...
- 从0开始学FreeRTOS-(列表&列表项)-6
# FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像. 在FreeRTOS中,列表与列表项使用得非常多,是Free ...
- Win10系列:JavaScript 项目模板中的文件和项模板文件
通过上面内容的学习,相信读者已经对各种项目模板和项模板有了大致的了解,本节将进一步介绍项目模板中默认包含的项目文件以及项模板文件,首先讲解这些文件中的初始内容以及作用,然后介绍在一个页面中如何添加控件 ...
- Win10系列:JavaScript 项目模板和项模板
使用Visual Studio 开发Windows应用商店应用时,通过其提供的模板可以帮助我们快速地创建一个应用.其中,在新建一个Windows应用商店应用程序项目时可以在项目模板中选择所需要的模板类 ...
随机推荐
- 在gitlab上删除分支后,本地git branch -r还能看到
1. git remote prune --dry-run origin 查看当前有哪些是该消失还存在的分支 2. git remote prune origin 删除上面展示的所有分支 3. git ...
- Microsoft.Practices.Unity使用配置文件总是报错The type name or alias could not be resolved.
Type name could not be resolved. Please check config file http://stackoverflow.com/questions/1493564 ...
- window上git bash运行错误记录
错误现象:每次启动git bash报出如下错误gitbash 0 [main] bash 11928 fork: child -1 - CreateProcessW failed for 'D:\P ...
- [Linux]安装kali虚拟机后忘记root密码
1. 登录时,按e进入编辑模式 2. 编辑模式 修改 ro 修改为 rw 添加 init=/bin/bash 修改完按 F10 3. 选择recovery mode 回车 4.输入命令passwd 设 ...
- ie8中如何使用base64
由于ie8中不能使用jQuery2.0以上版本所以无法使用 window.btoa()加密 window.atob()解密 所以只能使用最原生的base64加密方法如下: /** * Created ...
- ImportError: DLL load failed: 找不到指定的模块
如果遇到错误:ImportError: DLL load failed: 找不到指定的模块出现错误原因:安装包的来源问题,也可以理解为包版本兼容问题,有的包使用官方出版,有的包使用whl文件安装 解决 ...
- 定时从linux获取信息放到windows上
环境:windows上代码路径下存放:WinSCP-5.13.8-Setup.exe 第一步:test.txt 拉取脚本的txt文本 解析:存放从linux路径下拉取所需源文件zyy_count. ...
- css 能改变input type radio和checkbox 圆圈或方框的大小
把input隐藏,外面套label,再里面加个span,样式写在span上,让label覆盖在span上面,js去改active的class <label for="remember& ...
- 4 LinkedList
1 LinkedList public class LinkedList<E> extends AbstractSequentialList<E> implements Lis ...
- POCO C++库笔记 【1.Foundation基础库的结构】
Foundation库是POCO的基础库,提供了一些C++编程中常用的功能的抽象封装,主要由以下这些部分组成: Core -- 这部分除了建立跨平台库的基础头文件外,最有意义的部分是分装了原子计数的 ...