easyui datagrid单元格添加下拉框
来源：互联网 发布：办公室躺椅知乎 编辑：程序博客网 时间：2024/05/17 23:33
今天项目需求，需要在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> 0 0
- easyui datagrid单元格添加下拉框
- EasyUI 给datagrid单元格添加onmouseover事件
- easyui在datagrid的toolbar中添加下拉框combobox
- easyUI合并DataGrid单元格
- EasyUI DataGrid 编辑单元格
- easyui-datagrid 编辑单元格
- easyui datagrid合并单元格
- easyui-datagrid 编辑单元格
- EasyUI DataGrid 编辑单元格
- easyui-datagrid 合并单元格
- easyui datagrid 单元格赋值
- easyui datagrid 单元格合并
- 如何在easyui的DataGrid的单元格添加ProgressBar进度条
- easyui datagrid添加搜索框
- excel 单元格 添加 下拉框 下拉列表
- DataGrid添加下拉列表框
- easyui datagrid 单元格编辑保存
- EasyUI DataGrid可编辑单元格
- ural False Mirrors (状态压缩+记忆化搜索)
- 养成记录博客的习惯
- 中国压缩传感资源（China Compressive Sensing Resources）
- 水题之笨小熊南阳oj
- Apollo Architecture
- easyui datagrid单元格添加下拉框
- 跨服务器从一个服务器数据库一张表导数据到另一个服务器数据库另一张表中
- （驱动）（中断）简单的外部（按键）中断练习
- python出现SyntaxError: Non-ASCII character '\xe6' in file 打印日期.py on line 1, but no encoding declared;
- hdu 1198 Farm Irrigation(并查集)
- POJ 2280 && HDU 1661 Amphiphilic Carbon Molecules
- CFile与CStdioFile用法
- UIScrollViewDelegate
- 一起学android之子菜单的创建（6）
