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 菜单和列表项模板的更多相关文章

  1. SharePoint 2013 自定义翻页显示列表项

    项目需求:自定义开发一个能分页显示列表项的小部件,允许左右翻页,能根据用户权限来显示管理链接等. 效果如下: 技术要求:使用sharepoint rest API 来获取列表项,这样性能高,能够快速响 ...

  2. android中RecyclerView控件的列表项横向排列

    本文是在上一篇文章的基础上做的修改:android中RecyclerView控件的使用 1.修改列表项news_item.xml:我这里是把新闻标题挪到了新闻图片的下面显示 <?xml vers ...

  3. Java中自定义枚举(Enum)项的值,可设置为指定的值

    一.代码 package base.lang; /** * ClassName: StateEnum  * @Description: TODO * @author fuming * @date 20 ...

  4. Windows Phone 7 ListBox 列表项渐显加载动画学习笔记

    在wp7程序中,当程序功能越来越复杂时,性能问题是我们不得不考虑的一个问题.在聊天列表中,如果聊天项过多,而且项目UI组件足够复杂时, 我们不得不想尽办法让UI尽快加载.所以有一种可行的方案,就是像Q ...

  5. 【UWP】列表项宽度自适应的实现

    目的 在UWP开发中,我们常常用到两个显示列表的控件:ListView和GridView.而这两个列表控件在PC等大屏幕上如果能多列"智能"调整自己的大小(通常是根据当前窗口大小调 ...

  6. 从0开始学FreeRTOS-(列表与列表项)-3

    # FreeRTOS列表&列表项的源码解读     第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像. 在`FreeRTOS`中,列表与列表项使用得非常多 ...

  7. 从0开始学FreeRTOS-(列表&列表项)-6

    # FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像. 在FreeRTOS中,列表与列表项使用得非常多,是Free ...

  8. Win10系列:JavaScript 项目模板中的文件和项模板文件

    通过上面内容的学习,相信读者已经对各种项目模板和项模板有了大致的了解,本节将进一步介绍项目模板中默认包含的项目文件以及项模板文件,首先讲解这些文件中的初始内容以及作用,然后介绍在一个页面中如何添加控件 ...

  9. Win10系列:JavaScript 项目模板和项模板

    使用Visual Studio 开发Windows应用商店应用时,通过其提供的模板可以帮助我们快速地创建一个应用.其中,在新建一个Windows应用商店应用程序项目时可以在项目模板中选择所需要的模板类 ...

随机推荐

  1. 在gitlab上删除分支后,本地git branch -r还能看到

    1. git remote prune --dry-run origin 查看当前有哪些是该消失还存在的分支 2. git remote prune origin 删除上面展示的所有分支 3. git ...

  2. 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 ...

  3. window上git bash运行错误记录

    错误现象:每次启动git bash报出如下错误gitbash  0 [main] bash 11928 fork: child -1 - CreateProcessW failed for 'D:\P ...

  4. [Linux]安装kali虚拟机后忘记root密码

    1. 登录时,按e进入编辑模式 2. 编辑模式 修改 ro 修改为 rw 添加 init=/bin/bash 修改完按 F10 3. 选择recovery mode 回车 4.输入命令passwd 设 ...

  5. ie8中如何使用base64

    由于ie8中不能使用jQuery2.0以上版本所以无法使用 window.btoa()加密 window.atob()解密 所以只能使用最原生的base64加密方法如下: /** * Created ...

  6. ImportError: DLL load failed: 找不到指定的模块

    如果遇到错误:ImportError: DLL load failed: 找不到指定的模块出现错误原因:安装包的来源问题,也可以理解为包版本兼容问题,有的包使用官方出版,有的包使用whl文件安装 解决 ...

  7. 定时从linux获取信息放到windows上

    环境:windows上代码路径下存放:WinSCP-5.13.8-Setup.exe 第一步:test.txt   拉取脚本的txt文本 解析:存放从linux路径下拉取所需源文件zyy_count. ...

  8. css 能改变input type radio和checkbox 圆圈或方框的大小

    把input隐藏,外面套label,再里面加个span,样式写在span上,让label覆盖在span上面,js去改active的class <label for="remember& ...

  9. 4 LinkedList

    1 LinkedList public class LinkedList<E> extends AbstractSequentialList<E> implements Lis ...

  10. POCO C++库笔记 【1.Foundation基础库的结构】

    Foundation库是POCO的基础库,提供了一些C++编程中常用的功能的抽象封装,主要由以下这些部分组成: Core  -- 这部分除了建立跨平台库的基础头文件外,最有意义的部分是分装了原子计数的 ...