jqgrid 同列不同行的<select>不相同
如图下所示:
简述原理:设置好表格 所需的字段变量以及字段属性,从后台获取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>不相同的更多相关文章
- jqGrid选择列控件向右拖拽超出边界处理
jqGrid选择列控件向右拖拽超出边界处理 $("#tb_DeviceInfo").jqGrid('navButtonAdd', '#jqGridPager', { ...
- jqGrid冻结列
jqgrid冻结列 冻结列:就是横向移动表格时,让某一列保持不动 做法: 1.colModel的行要加上属性: frozen:true.注意:冻结列必须从第一列开始,包括隐藏列 2.加载jqgrid后 ...
- jqGrid动态列
HTML代码: <div id="divList"> <div class="toolbar"> </div> <ta ...
- jqgrid表格列动态加载的实现
选中几个测点名,在表格中就显示几列. 具体代码如下: function reloadGrid(postData){ $('#gridTable').jqGrid('GridUnload'); var ...
- Jqgrid 序号列宽度调整
// 遍历jqgrid 使其序号列宽度为45 function setwidth() { $("table[role='grid']").each(function () {//j ...
- jqgrid操作列循环显示三个按钮
首先ajax取数据 $.ajax( { type: "get", url: "../../MECManage/TJYY/collect", cache: fal ...
- jqgrid 将列头设置为超链接或按钮
有时,需要将某个列头设置为超链接或按钮,点击超链接或按钮能够跳转至其他页面(或执行一个事件操作). 可以把 label 值设置成一个a标签或button 代码如下: colModel: [{ labe ...
- jquery如何判断表格同一列不同行input数据是否重复
function hasRepeat(objId,columnIndex){ var arr = []; $("#"+objId+" tbody tr").ea ...
- jqgrid 设置冻结列
有时,jqgrid表格的列非常多,而表格的宽度值是固定的,我们需要在表格底部出现滚动条,并且固定前面几个列作为数据参照项,如何实现? 需要用的jqgrid冻结列,步骤如下: 1)设置需要冻结的列属性, ...
随机推荐
- springboot入门_data-jpa
今天学习了在springboot项目中访问数据库,做下笔记,以备后期查看. Spring Data JPA 是 Spring 基于 ORM 框架和JPA 规范 封装的一套应用框架,包含了增删改查等常用 ...
- C/C++语言简介之语言组成
一.数据类型 C的数据类型包括:整型.字符型.实型或浮点型(单精度和双精度).枚举类型.数组类型.结构体类型.共用体类型.指针类型和空类型. 二.常量与变量 常量其值不可改变,符号常量名通常用大写. ...
- C# winform中Show()和ShowDialog()的区别
项目实际开发中需要根据不同的应用场景利用Show和ShowDialog,尤其是三级弹窗,慎用ShowDialog,否则会导致关闭第三级窗体时,自动关闭第二级,解决方案就是在第一级窗体弹出时采用Show ...
- perl的foreach循环的坑
最近在写perl脚本的时候用foreach遍历hash的时候,出现遇到了一个问题,就是说当hash为一层的时候,并不会有问题,但是当hash类型结构比较复杂的时候,就会有需要注意的地方了. 还是举例子 ...
- HADOOP集群配置
http://wenku.baidu.com/view/92cbe435eefdc8d376ee32eb.html http://www.infoq.com/cn/articles/hadoop-co ...
- yii学习笔记--使用gii快速创建控制器和模型
配置gii 'gii'=>array( 'class'=>'system.gii.GiiModule', 'password'=>'123456',//使用gii的密码 // If ...
- Caused by: java.lang.ClassNotFoundException: org.jbpm.pvm.internal.processengine.SpringHelper
1.错误描述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help ...
- 【原】eclipse创建maven工程时,如何修改默认JDK版本?
问题描述:eclipse建立maven项目时,JDK版本默认是1.5,想创建时默认版本设置为1.8,如何修改? 解决方案: 找到本机maven仓库存放位置,比如:${user.home}/.m2/路径 ...
- 笔记:promise实例+注释
////////////////////////////////////////////// var data = [1,2,3,4]; var promise = new Promise((reso ...
- tomcat原理(二)
一.打包JavaWeb应用 在Java中,使用"jar"命令来对将JavaWeb应用打包成一个War包,jar命令的用法如下: