今天项目需求，需要在datagrid某个单元格格式化为下拉框，在此做一个笔记，以备日后再用。
1：创建一个datagrid
<span style="font-family:Comic Sans MS;"><table id="dg">
</table></span>
<span style="font-family:Comic Sans MS;"> <script type="text/javascript">
var row;
var baseSqlUrl = '/jsvc/service/OM_OilMonthly/';
var startDate = "";//起止值
var year = startDate.substring(0, 4);
var lastRowIndex = -1;
var versionData = [];
$(function() {
//初始化工具条页面
$('#main-layout').layout('panel', 'north').panel({
href: 'OilMonthlyTools.jsp'
});
//初始化datagrid
$('#dg').datagrid({
url: "/jsvc/service/document/searchFileByNameAndDateAndTreeCodeAndFileType",
queryParams: {
treeCode: '4nhqglm62tnt3z5uurq48pcc',
fileName: '2014'
},
fit: true,
nowrap: false,
pagination: true,
singleSelect: true,
rownumbers: true,
autoRowHeight: true,
columns: [[
{
field: 'ck',
checkbox: true
},
{
field: 'fileName',
title: '文件名称',
width: 260,
align: 'center',
halign: 'center'
},
{
field: 'fileCreated',
title: '文件生成时间',
width: 150,
align: 'center',
halign: 'center'
},
{
field: 'fileVersion',
title: '文件版本',
width: 100,
align: 'center',
halign: 'center',
formatter: function(value, row, index) {
return "V" + row['fileVersion'];
},
editor: {
type: 'combobox',
options: {
data: versionData,
valueField: 'versionId',
textField: 'versionNumber',
panelHeight: 'auto'
}
}
},
{
field: 'fileId',
title: '操作',
width: 200,
align: 'center',
halign: 'center',
formatter: formatShow
}
]],</span><span style="font-family:Comic Sans MS;"> //选中事件，取消上一个选中行的编辑，然后设置versionData为空
onSelect: function(rowIndex, rowData) {
if (lastRowIndex != -1 && lastRowIndex != rowIndex) {
$(this).datagrid('endEdit', lastRowIndex);
versionData = [];
}
lastRowIndex = rowIndex;
row = rowData;
},</span><span style="font-family:Comic Sans MS;"> //添加一个row双击事件，来动态加载下拉框里边的内容
onDblClickRow: function(rowIndex, rowData) {
$(this).datagrid('selectRow', rowIndex);//选中这一行
$(this).datagrid('beginEdit', rowIndex);//设置可编辑状态
var ed = $(this).datagrid('getEditor', {index: rowIndex, field: "fileVersion"});
$.ajax({//加载数据
url: '/jsvc/service/document/getFileVersions.json?logicId=' + rowData.stringFileId,
dataType: 'json',
type: 'POST',
success: function(data) {
versionData = [];
$.each(data, function(i, item) {
var obj = {};
obj.versionId = data[i].versionNumber;
obj.versionNumber = 'V' + data[i].versionNumber;
obj.id = data[i].stringVersionId;
versionData.push(obj);
});
$(ed.target).combobox('loadData', versionData);
}
});
}
});
});</span><span style="font-family:Comic Sans MS;"> //格式化数据
function formatShow(value, row) {
return '<a title="预览" href="javascript:showFile()">预览</a> <a title="下载" href="javascript:downLoad()">下载</a>';
}
function formatDowmLoad(value, row) {
return '<a title="下载" href="javascript:downLoad()">下载</a>';
}
//文件预览
function showFile() {
var fileName = row.fileName;
var fileId = row.stringFileId;
$('#MainPanel').window({
title: '预览',
modal: true,
fit: true,
maximized: true,
collapsible: true,
maximizable: false,
minimizable: false,
content: '<iframe width=100% height=100% src="/epcwebsite/CommonComponent/DocumentMgr/doc/center/preview/flashPreview.jsp?WMode=transparent&fileName=' + fileName + '&logicId=' + fileId + '" frameborder="0" style="margin:0px;padding:0px;border:0;overflow:hidden;" ></iframe>'
});
}
//下载文件
function downLoad() {
if (versionData.length != 0) {
var versionId = "";
$.each(versionData, function(i, item) {
if (row.fileVersion = item.versionId) {
versionId = item.id;
return;
}
});
location.href = "/jsvc/service/file/writeFileContentByVersion?versionId=" + versionId;
} else {
location.href = "/jsvc/service/file/writeFileContent?logicId=" + row.stringFileId;
}
}
//触发选中年月日历控件月份重新刷新表格
function customFunction(yearMonth) {
if (year != yearMonth.substring(0, 4)) {
$('#dg').datagrid('load', {
treeCode: '4nhqglm62tnt3z5uurq48pcc',
fileName: yearMonth.substring(0, 4)
});
year = yearMonth.substring(0, 4);
}
}
</script></span>
版权声明：本文为kabuqinuo229891原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。