这两天研究了一下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) //输出下拉框选择列表项的值
}

 

最后显示的效果如图

问题解决了,如果各位有更好的解决方法,欢迎一起交流~~~

EasyUI中文网:http://www.jeasyui.cn

TopJUI前端框架:http://www.topjui.com

TopJUI交流社区:http://ask.topjui.com

EasyUI/TopJUI可编辑表格的列根据返回数据判断是使用 combobox 还是 numberbox的更多相关文章

  1. easyui datagrid可编辑表格使用经验分享

    文章目录 1相关接口方法 2列属性formatter 3编辑器类型 3.1基于my97的编辑器 3.2简单的密码编辑器 3.3动态增加/删除编辑器 4字段的级联操作 4.1combobox的级联操作 ...

  2. jQuery EasyUI/TopJUI创建树形表格下拉框

    jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...

  3. JQuery Easyui/TopJUI 基本树形表格的创建

    <table data-toggle="topjui-treegrid" data-options="id:'menuTg', idField:'id', tree ...

  4. element 表格无法绑定服务返回数据

    无法直接绑定返回的Object属性,需要用js做一次对象转换后,才能绑定 <template> <div> <!--<button>添加服务器</but ...

  5. JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能

    JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...

  6. jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  7. JavaScript- jquery easyui 可编辑表格插件 easyui.editgrid

    最近项目前端使用 jquery+easyui来做,用了几个月,觉得easyui是一个很不错的开源前端UI框架, 虽然偶尔会遇到一些小问题,但是凭借多年前端开发的实力积累 都一一解决了,其中比较典型的就 ...

  8. 实现Easyui 可编辑表格

    一.前端框架使用的easyui框架 二.后端使用的是jfinal 三.效果图 四.html代码 <div id="table_tree" class="easyui ...

  9. Easyui 编辑表格行删除

    1.问题描述 easyui 编辑表格新增一条数据后,删除最后一行删除不了,原因是没有提交数据acceptChanges. 源码中deleteRow方法,根据坐标获取行html,方法为opts.find ...

随机推荐

  1. Vue 单页面应用 SEO SPA single page application advantages and disadvantages

    处理 Vue 单页面应用 SEO 的另一种思路 - muwoo - 博客园 https://www.cnblogs.com/tiedaweishao/p/7493971.html SPA网站SEO完美 ...

  2. 我对Swift的几点疑问

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/caowenbin/article/details/31418773         Swift自问世 ...

  3. 牛客练习赛14 D 比较月亮大小 【水】

    链接:https://www.nowcoder.com/acm/contest/82/D 来源:牛客网 比较月亮大小 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其 ...

  4. 配置composer代理

    composer config -g repo.packagist composer https://packagist.phpcomposer.com

  5. RobotFramework教程使用笔记——requests和requestslibrary库

    Robotframework也可以进行接口测试,只要导入相应的库就可以做到. 一.准备工作 1.导入requests,使用pip,或者手动下载 pip install requests 2.导入req ...

  6. 如何刷新本地的DNS缓存?

    为了提高网站的访问速度,系统会在成功访问某网站后将该网站的域名.IP地址信息缓存到本地.下次访问该域名时直接通过IP进行访问.一些网站的域名没有变化,但IP地址发生变化,有可能因本地的DNS缓存没有刷 ...

  7. Ueditor文本编辑工具栏自定义

    1.找到 ueditor.config.js 文件 2.在 toolbars 数组内进行删减,添加 , toolbars: [[ 'fullscreen', 'source', '|', 'undo' ...

  8. react之redux增加删除数字

    比如在页面中添加和删除‘222’ action.js export const ADD= 'ADD'; export const RED='RED'; export const add=(str)=& ...

  9. python下载各大主流视频网站电影

    You-Get 是一个命令行工具, 用来下载各大视频网站的视频, 是我目前知道的命令行下载工具中最好的一个, 之前使用过 youtube-dl, 但是 youtube-dl 吧, 下载好的视频是分段的 ...

  10. python逼格提升

    1.合并可以匹配的条件 s1 = 7 if s1 > 5 and s1 < 10: print(s1) s1 = 7 if 5 < s1 < 10: print(s1) 2.i ...