当前位置： 移动技术网 > IT编程>开发语言>JavaScript > TopJUI可编辑表格的列根据返回数据判断是使用 combobox 还是 numberbox

TopJUI可编辑表格的列根据返回数据判断是使用 combobox 还是 numberbox

2019年05月24日  | 移动技术网IT编程  | 我要评论

这两天研究了一下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前端框架：

  topjui交流社区：

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网