最近需要实现单据（主子表形式），表格使用jqgrid,下拉组件使用select2。
功能
jqgrid让行处于编辑状态；
$('#dataGrid').jqGrid('editRow', id, {
"keys" : false
});
jqgrid本身不提交数据，拼到form统一提交；
- 设置datatype: ‘local’，jqgrid不会提交到服务器；
$('#dataGrid').dataGrid({
datatype: 'local',
columnModel: [{
header: '物资编码',
name: 'code',
width: 180,
align: "center"
}]
});
- jqgrid 编辑行，enter 不提交、esc不退出编辑；
$('#dataGrid').jqGrid('editRow', id, {
"keys" : false
});
- form enter 不提交；
$("#inputForm").keydown(function(event){
switch(event.keyCode){
case 13:
return false;
}
});
jqgrid单元格自定义组件，单元格联动；
- 指定可编辑列
设置列属性editable: true
$('#dataGrid').dataGrid({
datatype: 'local',
columnModel: [{
header: '物资编码',
name: 'code',
width: 180,
align: "center",
editable: true
}]
});
- 单元格自定义组件、jqgrid单元格联动；
jqgrid单元格联动在于选择物资后填充其他单元格、并替换计量单位的可选列表。
// 下拉选项的格式化显示
function formatMat (repo) {
if (repo.loading) {
return repo.text;
}
var $container = $(
"<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__name'></div>" +
"<div class='select2-result-repository__description'></div>" +
"<div class='select2-result-repository__props'>" +
"<div class='select2-result-repository__spec'><i class='fa fa-flash'></i> </div>" +
"<div class='select2-result-repository__model'><i class='fa fa-star'></i> </div>" +
"<div class='select2-result-repository__brand'><i class='fa fa-eye'></i> </div>" +
"</div>" +
"</div>" +
"</div>"
);
$container.find(".select2-result-repository__name").text(repo.name);
$container.find(".select2-result-repository__description").text(repo.code);
$container.find(".select2-result-repository__spec").append("规格："+(repo.specLabel?repo.specLabel:''));
$container.find(".select2-result-repository__model").append("型号："+(repo.modelLabel?repo.modelLabel:''));
$container.find(".select2-result-repository__brand").append("品牌；"+(repo.brandLabel?repo.brandLabel:''));
return $container;
}
// select2 选择返回值
function formatMatSelection (repo) {
matChooseCallback(repo);
return repo.code || repo.text;
}
// 选择物资后给相关单元格赋值、替换计量单位列表
function setMatData(grid , row , mat){
grid.setCell(row ,'name' , mat.name);
grid.setCell(row ,'spec' , mat.specLabel);
grid.setCell(row ,'model' , mat.modelLabel);
measureUnitChange($('#'+row+'_measureUnit') , mat.measureUnits, mat.measureUnit);
}
// 计量单位下拉列表设值
function measureUnitChange(comp , measureUnits ,measureUnit){
// 清空给下拉列表重赋值
comp.html('');
let dataNew = $.map(measureUnits, function (obj) {
obj.text = obj.label;
obj.id = obj.value;
return obj;
});
// 给select2追加数据的处理
comp.val(measureUnit).select2({
data: dataNew
});
}
function triggerSelect(mat){
// create the option and append to Select2
let option = new Option(mat.code, mat.code, true, true);
$('#'+lastEdit+'_code').append(option).trigger('change');
/*// manually trigger the `select2:select` event
$('#'+lastEdit+'_code').trigger({
type: 'select2:select',
params: {
data: mat
}
});*/
}
// 根据值查询数据再处理赋值setMatData
function matChooseCallback(data){
let code = data.code || data.id;
if (code){
$.getAsync('url'+code,function(data){
let mat = data.datas;
setMatData($('#dataGrid'),lastEdit,mat);
},function(data){
// 查询失败
})
}
}
// select2 ajax数据源配置项
function getMatEditOptions(){
let editoptions = {
ajax: {
url: '服务端接口',
dataType: 'json',
delay: 800, // select2 搜索框停止输入800ms后开始搜索
// 请求参数
data: function (params) {
return {
q: params.term, //搜索框输入字符串
page: params.page//分页页码
};
},
processResults: function (data, params) {
// 请求获取到数据后的处理
// 分页参数
params.page = params.page || 1;
// 处理数据适用于select2 ,select2 需要的数据结构是[{'id':'','text':''},...]
let dataNew = $.map(data.data, function (obj) {
obj.text = obj.text || obj.code;
// 如果id冲突，需在jqgrid增加附加列存储需要的值，可将id赋给该列，后取值再从该列获取。
obj.materialId = obj.id;
obj.id = obj.text;
return obj;
});
let re = {
results: dataNew,
// 分页参数,判断是否有更多数据，用于下拉加载更多
pagination: {
more: (data.page * data.limit) < data.count
}
}
return re;
},
cache: true
},
width: '100%',
selectionCssClass: 'selectionCssClass',
language: 'zh-CN',// 汉化
minimumInputLength: 1, // 输入框最小键入字符数开始搜索
allowClear: false, // 选择框选项允许清理（带叉叉）
templateResult: formatMat, // 下拉选择框处理
templateSelection: formatMatSelection // 选择返回值
};
return editoptions;
}
function matInput(value, options){
// 注意select2 需要绑定select组件，而不是input组件，否则会出现问题。
let inputMat = $("<select id='input_select' type='text' name='code' value='"+value+"'>"+
'<option value='+value+'>'+value+'</option>'+
'</select>'+
'<a href="#" class="btn btn-default btn-sm searchbtn" id="btnSearch" name="code_btn" title="物资"><i class="fa fa-search"></i></a>');
regMatList(inputMat[1],triggerSelect);
return inputMat;
};
// 注册弹出框处理
function regMatList(component,matChoose) {
component.onmouseup = function(){
layer.open({
type: 2,
title: '选择物资目录',
shadeClose: true,
scrollbar: false,
shade: 0.3,
area: ['80%', '88%'],
content: '选择物资的弹出框url',
btn: ['<i class="fa fa-plus"></i> 确定', '<i class="fa fa-times"></i> 取消'],
btn1: function(index, layero){
// 确定获取选择的物资，传入回调方法执行
let selRowId = layer.iframeWindow(index).win.$('#selRowId').val();
let selRowData = layer.iframeWindow(index).win.$('#dataGrid').getRowData(selRowId);
console.log('selRowId-------------'+selRowId);
if (matChoose && matChoose.length > 0) {
let selectedCallbackFun = eval(eval(matChoose));
if (typeof selectedCallbackFun === 'function') {
selectedCallbackFun(selRowData,true);
}
}
layer.close(index);
},
btn2: function(index, layero){
}
});
}
}
function matValue(elem, operation) {
return $(elem).val();
};
function matDataInit(elSelect) {
let $elSelect = $(elSelect).children(".customelement")[0];
let value = $($elSelect).attr("value");
let editoptions = getMatEditOptions();
$($elSelect).val(value).select2(editoptions);
};
$('#dataGrid').dataGrid({
datatype: 'local',
columnModel: [{
header: '物资编码',
name: 'code',
width: 180,
align: "center",
edittype:'custom', // 编辑类型，自定义
editoptions:{
custom_element: matInput, // 自定义组件
custom_value: matValue, // 自定义组件取值
dataInit: matDataInit //自定义组件数据初始化
},
editable: true
}]
});
jqgrid编辑状态取值设值；
编辑状态设值用（‘rowId_colName’).val(value)，其实是直接操作自定义组件;
编辑状态取值也用该方法（‘rowId_colName’).val()。
jqgrid最后一个可编辑单元格tab键增行；
可在dataInit 方法中增加tab事件，处理增行
// 在行最后一个可编辑单元格增加键盘按键事件
$(elSelect).keydown(function(event){
switch(event.keyCode){
case 9: {
// 增行关键在于当前编辑行是否是jqgrid最后一行，是则增行
var rowId = $('#dataGrid').getDataIDs();
var maxId = rowId[rowId.length-1];
if (lastEdit == maxId){
addRow(maxId);
}
return;
}
}
});
function addRow(rowId) {
var $dataGrid = $('#dataGrid');
var theRowId = Math.max.apply(Math, $dataGrid.getDataIDs()) + 1;
$dataGrid.addRowData(theRowId, {}, "after", rowId);
editRow(theRowId);
}
jqgrid冻结列；
关键点：
- shrinkToFit: false 不适应宽度；
- 必须前面列全部冻结；
- 前面列不能有hidden列。
存在问题：冻结部分行高与自定义组件错位（待解决）。
$('#dataGrid').dataGrid({
datatype: 'local',
shrinkToFit: false,
columnModel: [{
header: '物资编码',
name: 'code',
width: 180,
align: "center",
frozen: true
}{
header: '物资名称',
name: 'code',
width: 180,
align: "center",
frozen: true
}{
...
}]
});
可模糊搜索选择物资，可弹出窗选择物资；
关键点：
- 接口关键字拼音模糊搜索；
- 单元格自定义组件按钮，注册按下弹出窗口选择事件。
其他问题
- 做完jqgrid数据，发现id不是预期的数据；
- 描述：使用jqgrid做列表编辑，从接口获取的数据列表，默认有id属性。
- 现象：后端传到前端的id值在grid上处理后变成了grid上自动生成的id值，而非后端赋予前端的值。
- 原因：jqgrid默认使用id作为key列，后端传值会被grid自动覆盖。
- 解决方法：指定另外一列作为key，即对colModel中某列设置key:true。
header: 'rn',
name: 'rn',
key : true,
hidden: true
1104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
