如图下所示:


简述原理:设置好表格 所需的字段变量以及字段属性,从后台获取j数据后,在js文件中把数据组合成json格式的字符串,利用字段属性把json数据转换成select,就能实现同列不同行select不同内容。

1、设置colNames与colModel,js代码如下:

  colNames: ['全部商品单位','商品单位标识','商品单位比例值','商品基础单价','商品单位'']

  colModel: [{
name:'unitData',hidden:true},{name:'unit_id',hidden:true},{name:'scale_value',hidden:true
},{name:'old_price',
hidden:true},{name:'unit',index:'unit',align:'center',
editable:true,edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue},width:150, sortable:false}]

2、js获取到的后他数据对格式进行转换,转成json格式的字符串,js代码如下:

   for (var i = 0; i < arr.length; i++) { //arr是从后台获取的数据
            rows_info['unit'] = arr[i].unit.info.name; //商品单位,用于显示默认的单位
            rows_info['old_price'] = arr[i].buy; //商品基础单价,用于记住默认的单位对应的单价
            rows_info['unit_id'] = arr[i].unit.ape; //商品单位id,用于记住当前所选的单位id,后面有用
            rows_info['scale_value'] = arr[i].unit.info.scale_value; //商品单位比例值,用于记住当前所选的单位与默认单位的换算值
            var unitData = arr[i].unitData;//后台获取的该商品的全部单位数据
            var json = '[';
            for (var j = 0; j < unitData.length; j++) {
               
json += "{'id':"+ unitData[j].id
+",'name':'"+unitData[j].name+"','scale_value':'"+unitData[j].scale_value+"'},";
            }
            json = json.slice(0,-1);
            json += "]";
            rows_info['unitData'] = json; //全部商品单位,转换成json格式的字符串
       }

3、colModel 单位属性的函数,js代码如下:

//触发产生相对应的单位select,还有另一种方法(在最后注释的部分)
function myelem(value, options) {
    var row_id = $("#table").jqGrid('getGridParam','selrow');
    var row  = $("#table").jqGrid('getRowData',row_id);//获取当前行数据
    var el = document.createElement("select");
    var unitData = row.unitData;
    if(unitData!=null&&unitData.length>0)
    {  
          var optvalues = eval(unitData);//html形式的全部单位信息转换成js数据
          console.log(optvalues);  
          for(var i in optvalues){
              var optvalue = optvalues[i].id;  //该单位id
              var optdisplay = optvalues[i].name;//该单位名
              var optlabel = optvalues[i].scale_value;//该单位对于默认单位的比例值(换算值)
              var optel = document.createElement("option");
              optel.innerHTML = optdisplay;  
              optel.value = optvalue;  
              optel.title = optlabel;  
              el.appendChild(optel);      
          }
    }
    return el;
}
//选中单位后触发改变已记住的单位id、单位比例值(两者在存储的时候有用)
function myvalue(elem, operation, value) {
    var row_id=$(elem).context.id;
    // var unit_id = $(elem).find("option:selected").val();
    var unit_id = $(elem).val();
    var scale_value = $(elem).find("option:selected").attr('title');
    $("#table").jqGrid('setCell',row_id,'unit_id',unit_id);//设置单位Id
    $("#table").jqGrid('setCell',row_id,'scale_value',scale_value);//设置单位比例值
    var old_price = $("#table").jqGrid('getCell',row_id,'old_price');//获取商品基础单位时的单价
    $("#table").jqGrid('setCell',row_id,'price',(old_price-0)*(scale_value-0));//设置该单位的单价,基础单价乘以比例值
    return $(elem).find("option:selected").text();
}

//此方法缺点:ajax必须同步请求,请求时间过长,造成编辑的单元格变化缓慢
// function myelem(value, options) {
//      var row_id = $("#table").jqGrid('getGridParam','selrow');
//      var row  = $("#table").jqGrid('getRowData',row_id);//获取当前行数据
//      var html="<select>";
//      $.ajax({
//          type:'post',
//          url:"xxx",
//          async: false, //同步
//          data:{"id":row.set_id},
//          success(re){
//              for (var i = 0; i < re.length; i++) {
//                  html += "<option value='"+re[i].id+"'>"+re[i].name+"</option>";
//              }
//              html += "</select>";
//          }
//      });
//     return html;
// }

jqgrid 同列不同行的<select>不相同的更多相关文章

  1. jqGrid选择列控件向右拖拽超出边界处理

    jqGrid选择列控件向右拖拽超出边界处理 $("#tb_DeviceInfo").jqGrid('navButtonAdd', '#jqGridPager', {         ...

  2. jqGrid冻结列

    jqgrid冻结列 冻结列:就是横向移动表格时,让某一列保持不动 做法: 1.colModel的行要加上属性: frozen:true.注意:冻结列必须从第一列开始,包括隐藏列 2.加载jqgrid后 ...

  3. jqGrid动态列

    HTML代码: <div id="divList"> <div class="toolbar"> </div> <ta ...

  4. jqgrid表格列动态加载的实现

    选中几个测点名,在表格中就显示几列. 具体代码如下: function reloadGrid(postData){ $('#gridTable').jqGrid('GridUnload'); var ...

  5. Jqgrid 序号列宽度调整

    // 遍历jqgrid 使其序号列宽度为45 function setwidth() { $("table[role='grid']").each(function () {//j ...

  6. jqgrid操作列循环显示三个按钮

    首先ajax取数据 $.ajax( { type: "get", url: "../../MECManage/TJYY/collect", cache: fal ...

  7. jqgrid 将列头设置为超链接或按钮

    有时,需要将某个列头设置为超链接或按钮,点击超链接或按钮能够跳转至其他页面(或执行一个事件操作). 可以把 label 值设置成一个a标签或button 代码如下: colModel: [{ labe ...

  8. jquery如何判断表格同一列不同行input数据是否重复

    function hasRepeat(objId,columnIndex){ var arr = []; $("#"+objId+" tbody tr").ea ...

  9. jqgrid 设置冻结列

    有时,jqgrid表格的列非常多,而表格的宽度值是固定的,我们需要在表格底部出现滚动条,并且固定前面几个列作为数据参照项,如何实现? 需要用的jqgrid冻结列,步骤如下: 1)设置需要冻结的列属性, ...

随机推荐

  1. springboot入门_data-jpa

    今天学习了在springboot项目中访问数据库,做下笔记,以备后期查看. Spring Data JPA 是 Spring 基于 ORM 框架和JPA 规范 封装的一套应用框架,包含了增删改查等常用 ...

  2. C/C++语言简介之语言组成

    一.数据类型 C的数据类型包括:整型.字符型.实型或浮点型(单精度和双精度).枚举类型.数组类型.结构体类型.共用体类型.指针类型和空类型. 二.常量与变量 常量其值不可改变,符号常量名通常用大写. ...

  3. C# winform中Show()和ShowDialog()的区别

    项目实际开发中需要根据不同的应用场景利用Show和ShowDialog,尤其是三级弹窗,慎用ShowDialog,否则会导致关闭第三级窗体时,自动关闭第二级,解决方案就是在第一级窗体弹出时采用Show ...

  4. perl的foreach循环的坑

    最近在写perl脚本的时候用foreach遍历hash的时候,出现遇到了一个问题,就是说当hash为一层的时候,并不会有问题,但是当hash类型结构比较复杂的时候,就会有需要注意的地方了. 还是举例子 ...

  5. HADOOP集群配置

    http://wenku.baidu.com/view/92cbe435eefdc8d376ee32eb.html http://www.infoq.com/cn/articles/hadoop-co ...

  6. yii学习笔记--使用gii快速创建控制器和模型

    配置gii 'gii'=>array( 'class'=>'system.gii.GiiModule', 'password'=>'123456',//使用gii的密码 // If ...

  7. Caused by: java.lang.ClassNotFoundException: org.jbpm.pvm.internal.processengine.SpringHelper

    1.错误描述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help ...

  8. 【原】eclipse创建maven工程时,如何修改默认JDK版本?

    问题描述:eclipse建立maven项目时,JDK版本默认是1.5,想创建时默认版本设置为1.8,如何修改? 解决方案: 找到本机maven仓库存放位置,比如:${user.home}/.m2/路径 ...

  9. 笔记:promise实例+注释

    ////////////////////////////////////////////// var data = [1,2,3,4]; var promise = new Promise((reso ...

  10. tomcat原理(二)

    一.打包JavaWeb应用 在Java中,使用"jar"命令来对将JavaWeb应用打包成一个War包,jar命令的用法如下: