TopJUI可编辑表格的列根据返回数据判断是使用 co…
2019-05-24 06:11:18来源:博客园 阅读 ()
这两天研究了一下topjui的可编辑表格edatagrid,想在每一列的后面根据返回的数据判断是使用 combobox 还是 numberbox,期间遇到了一些坑,下面实现代码,需要的朋友可以参考一下。
json数据
html
<table data-toggle="topjui-edatagrid" data-options="id:'configEdatagrid', fitColumns:true, remoteSort:false, url: '../../json/datagrid/product-list.json', "> <thead> <tr> <th data-options="field:'uuid',title:'UUID',checkbox:true"></th> <th data-options="field:'name',title:'商品名称',sortable:true,width:100"></th> <th data-options="field:'code',title:'商品编号',sortable:true,width:50,editor:{type:'text',options:{required:true,height:30}}"></th> <th data-options="field:'sale_price',title:'销售单价',sortable:true,width:50"></th> <th data-options="field:'operate',title:'操作',formatter:operateFormatter,width:100"></th> //单元格formatter(格式化器)函数 </tr> </thead> </table>
js
function operateFormatter(value, row, index) { if(row.code=='2103'){ //判断 当商品编号的值为2103的时候显示下拉框,否则显示数字输入框 var htmlstr = '<input class="cc" data-toggle="topjui-combobox" name="dept">'; return htmlstr; } else{ var str = '<input class="aa" type="text">'; return str; } } $(function () { var configEdatagrid = { type: 'edatagrid', id: 'configEdatagrid' }; $('#configEdatagrid').iEdatagrid({ onLoadSuccess: function (data) { //在数据加载成功的时候将组件初始化一下,否则显示的就只是一个输入框 $('.cc').iCombobox({ url:'../../json/dictionary/models.json', valueField:'id', textField:'code', onSelect: onSelect }); $('.aa').iNumberbox({ min:0, precision:2 }); } }) })
页面刷新的的时候显示如下图,是正常的
可是你一旦编辑完的时候它就又变回了一个输入框,如下图
这是因为在编辑一行完成后数据自动保存到后台,将表格又刷新了一次。这可怎么解决呢,我是这么写的,在结束编辑后又重新创建组件。
添加的js代码如下
function onAfterEdit(index, row, change){ //给需要操作的表格绑定onAfterEdit事件 $('.cc').iCombobox({ url:'../../json/dictionary/models.json', valueField:'id', textField:'code', onSelect: onSelect //在用户选择列表项的时候触发。 }); $('.aa').iNumberbox({ min:0, precision:2 }); } function onSelect(rec){ console.log(rec.text) //输出下拉框选择列表项的值 }
最后显示的效果如图
问题解决了,如果各位有更好的解决方法,欢迎一起交流~~~
TopJUI前端框架:http://www.topjui.com
TopJUI交流社区:http://ask.topjui.com
原文链接:https://www.cnblogs.com/xvpindex/p/10913793.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- JS实现table表格固定表头且表头随横向滚动而滚动 2020-02-07
- 详解bootstrap table表格的使用方法 2019-12-14
- Div自动滚动到末尾的代码 2019-11-23
- 前端JS实现一键导入excel表格 2019-08-14
- vue集成百度富文本编辑器 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash