今天项目需求,需要在datagrid某个单元格格式化为下拉框,在此做一个笔记,以备日后再用。
1:创建一个datagrid
- <table id="dg">
- </table>
- <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
- }
- ]],
- //选中事件,取消上一个选中行的编辑,然后设置versionData为空
- onSelect: function(rowIndex, rowData) {
- if (lastRowIndex != -1 && lastRowIndex != rowIndex) {
- $(this).datagrid('endEdit', lastRowIndex);
- versionData = [];
- }
- lastRowIndex = rowIndex;
- row = rowData;
- },
- //添加一个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);
- }
- });
- }
- });
- });
- //格式化数据
- 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);
- }
- }