<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格-下拉框动态添加</title> <link rel="stylesheet" type="text/css" href="./jquery-easyui//themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="./jquery-easyui//themes/icon.css"> <script type="text/javascript" src="./jquery-easyui//jquery.min.js"></script> <script type="text/javascript" src="./jquery-easyui//jquery.easyui.min.js"></script> <script src=""></script> </head> <body> <h2>表格中实现下拉框数据动态添加</h2> <div style="margin:20px 0;"></div> <table id="tabledg" class="easyui-datagrid" title="Format DataGrid Columns" style="width:700px;height:250px" data-options=" onClickCell: onClickCell, "> <thead> <tr> <th data-options="field:'name',width:80">Item ID</th> <th data-options="field:'index',width:100,formatter:combobox_formatter, editor:{ type:'combobox', options:{ panelHeight:'auto', valueField:'value', textField:'name', }}">下拉框</th> </tr> </thead> </table> <script> //在点击的时候获取对应的下拉框的数据，设置上去即可 let comboxdata = [] function getComboxData(index) { let rd = []; for (let i = 0; i < index; ++i) { let d = { value: i, name: `测试${i}` } rd.push(d); } return rd; } function getData() { var rows = []; for (var i = 1; i <= 10; i++) { var amount = Math.floor(Math.random() * 1000); var price = Math.floor(Math.random() * 1000); let comboxd = getComboxData(i); rows.push({ name: 'Name ' + i, index: parseInt(comboxd.length / 2), //设置默认显示的 comboxdatas: comboxd }); } let d = {}; d["rows"] = rows; d["total"] = rows.length; return d; } $(function() { let data = getData(); $("#tabledg").datagrid("loadData", data); }) //设置表格可以编辑 $.extend($.fn.datagrid.methods, { editCell: function(jq, param) { return jq.each(function() { var opts = $(this).datagrid('options'); var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields')); for (var i = 0; i < fields.length; i++) { var col = $(this).datagrid('getColumnOption', fields[i]); col.editor1 = col.editor; if (fields[i] != param.field) { col.editor = null; } } $(this).datagrid('beginEdit', param.index); for (var i = 0; i < fields.length; i++) { var col = $(this).datagrid('getColumnOption', fields[i]); col.editor = col.editor1; } }); } }); var editIndex = undefined; function endEditing() { if (editIndex == undefined) { return true } if ($('#tabledg').datagrid('validateRow', editIndex)) { $('#tabledg').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } function onClickCell(index, field) { if (endEditing()) { $('#tabledg').datagrid('selectRow', index) .datagrid('editCell', { index: index, field: field }); editIndex = index; //重点------------------------------------------------------------------- var ed = $('#tabledg').datagrid('getEditor', {index:index,field:field}); let dlist = $('#tabledg').datagrid("getRows")[index].comboxdatas; $(ed.target).combobox('loadData', dlist); //重点------------------------------------------------------------------- } } function combobox_formatter(value, row) { return row.comboxdatas[value].name } </script> </body> </html>
