您的位置:首页 > Web前端 > JQuery

jqgrid实现字段显示或隐藏问题

2017-08-08 19:31 477 查看
jQuery(grid_selector).jqGrid({
//direction: "rtl",			//表格中文字的显示方向,从左向右(ltr)或者从右向左(rtr)

data: grid_data,
datatype: "local",			//从服务器端返回的数据类型
height: 400,				//表格高度,可以是数字,像素值或者百分比
/****列显示名称******/
colNames:[' ', '', 'id', '订单号', '捆包号', '品名', '规格', '产品牌号(材质)', '数量', '重量(吨)', '质保书编号', '物资来源', '贸易商名称', '物资状态', '合同读取时间', '大宗物资网合同号', '集团合同库合同号', '查看附件', '详情'],
/****常用到的属性:name 列显示的名称;index 传到服务器端用来排序用的列名称;width 列宽度;align 对齐方式;sortable 是否可以排序******/
colModel:[
{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
formatter:'actions',
formatoptions:{
keys:true,
delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
}
},
{name:'myac222',index:'', width:80, fixed:true, sortable:false, resize:false,
formatter: function (value, grid, rows, state) {
return "<a href=\"#\" title=\"绑定合同\" style=\"margin-left:10px\" onclick=\"bindAttachment(" + rows.id + ")\"><i class=\"icon-cogs purple\" style=\"font-size:15px\"></i></a><a href=\"#\" style=\"margin-left:12px\" title=\"上传计划单\" onclick=\"uploadAttachment(" + rows.id + ")\"><i class=\"icon-cloud-upload blue\" style=\"font-size:15px\"></i></a>";
}
},
{name:'id', index:'id', width:60, editable:false, hidden:true},
{name:'goodsOrder',index:'goodsOrder', width:60, editable: true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsPackage',index:'goodsPackage', width:60, editable: true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsName',index:'goodsName',width:60, editable:true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsType',index:'goodsType',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsMaterial',index:'goodsMaterial',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsNumber',index:'goodsNumber',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsWeight',index:'goodsWeight',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsWarranty',index:'goodsWarranty', width:60, editable: true, editoptions:{size:"20",maxlength:"30"}},
{name:'goodsOrigin', index:'goodsOrigin', width:60, editable:true, edittype:'select', editoptions:{value:"贸易商:贸易商"}, hidden:true},	// editrules:{edithidden: true},
{name:'originName', index:'originName', width:60, editable:true},
{name:'goodsStatus', index:'goodsStatus', width:60, editable:true, hidden:true},
{name:'goodsContractreadtime',index:'goodsContractreadtime', width:60, sorttype:"date", unformat:pickDate},
{name:'dzPurchaseContractNum',index:'dzPurchaseContractNum', width:60, editable:false, edittype:'select', editoptions:{value:getDzContractNum()}},
{name:'groupPurchaseContractNum',index:'groupPurchaseContractNum', width:60, editable:false, edittype:'select', editoptions:{value:getGroupContractNum()}},
{name:'checkAttachment',index:'checkAttachment', width:60, sortable:false, editable:false},
{name:'goodsDetail',index:'goodsDetail', width:60, sortable:false, editable:false}
],

//footerrow: true,//分页上添加一行,用于显示统计信息
rownumbers: true,//添加左侧行号
viewrecords : true,		//定义是否要显示总记录数
rowNum:10,				//在grid上显示记录条数,这个参数是要被传递到后台
rowList:[10,20,30],		//一个下拉选择框,用来改变显示记录数,当选择时会覆盖rowNum参数传递到后台
pager : pager_selector,	//定义翻页用的导航栏,必须是有效的html元素。翻页工具栏可以放置在html页面任意位置
altRows: true,			//设置为交替行表格,默认为false
prmNames:{			//Default valuesprmNames: {page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 当参数为null时不会被发到服务器端
page:"page",		//设置初始的页码(默认值:1)
rows:"rows",
oper:"oper",
editoper:"edit",
addoper:"add",
deloper:"del",
},
//toppager: true,

multiselect: true,			//定义是否可以多选
//multikey: "ctrlKey",		//只有在multiselect设置为ture时起作用,定义使用那个key来做多选。shiftKey,altKey,ctrlKey
multiboxonly: true,			//只有当multiselect = true.起作用,当multiboxonly 为ture时只有选择checkbox才会起作用

gridComplete:function(){ //在此事件中循环为每一行添加修改和删除链接
var ids=jQuery("#grid-table").jqGrid('getDataIDs'); 					//获取单个id
for(var i = 0; i<ids.length; i++){
var id = ids[i];
var rowData = $("#grid-table").jqGrid('getRowData',id);
var goodsStatus = rowData.goodsStatus;

attachments = '<a href="../../checkAttachment/checkAttachment.html?id='+id+'&goodsStatus='+goodsStatus+'&pageOrigin=2">查看附件</a>';
jQuery("#grid-table").jqGrid('setRowData', ids[i], { checkAttachment: attachments});

detail = '<a href="../../orderDetail/orderDetail.html?id='+id+'&goodsStatus='+goodsStatus+'&pageOrigin=2&goodsOrigin=2">详情</a>';
jQuery("#grid-table").jqGrid('setRowData', ids[i], { goodsDetail: detail});
}
},

loadComplete : function() {
var table = this;
setTimeout(function(){
styleCheckbox(table);

updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},

editurl: "goods_editGoods.do",	//定义对form编辑时的url
caption: "物资信息列表",		//表格名称
autowidth: true				//如果为ture时,则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变,为了使表格宽度能够自动调整则需要实现函数:setGridWidth
});

①使字段在新增及展示时都不显示:

{name:'goodsOrigin', index:'goodsOrigin', width:60, editable:true, edittype:'select', editoptions:{value:"贸易商:贸易商"}, hidden:true},
②使字段在新增时不显示,在表格展示时显示出来:

{name:'dzPurchaseContractNum',index:'dzPurchaseContractNum', width:60, editable:false, edittype:'select', editoptions:{value:getDzContractNum()}},
③使字段在新增时显示,而在表格展示时不显示出来:

{name:'goodsNumber',index:'goodsNumber',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jqgrid jQuery javascript