easyui中combogrid如何设置多列，只有一个元素

Posted 2023-05-14

我的源码
<td>桌位选择：</td>
<td>
<input id="cg" style="width:150px" name="reserv.tab_id" value="<s:property value="reserv.tab_id"/>">
</td>
</tr>

$('#cg').combogrid(
panelHeight: 200,
editable: false,
idField: 'tab_id',
textField: 'tab_name',
url: '<%=request.getContextPath()%>/catering/Tab!getOrgList?orgId='+$("#cc").val(),
columns: [[
field:'tab_name',title:'桌位',width:50
]]
);

只有一个元素，现在显示方式是
1桌
2桌
3桌
4桌
。。
这样的。。。

我想做成
1桌 2桌 3桌
4桌 。。。
这样
一行显示三个元素，并且可选

参考技术A 生成数据的时候，就分成3个列来循环存，然后用3个field显示么
如果要每行的单独元素可以选择，那就有点蛋疼了，可以把数据做成可点击的标签...然后点击标签将值赋给某某某

easyui combogrid 按需加载,点击下拉加载

功能优点:减少不必要的http请求,减少服务器查询压力,降低额外的浏览器渲染,提高呈现速度
开发分享: combogrid 点击才请求的功能实现
简要:我分析了费用系统,和现在全网的写法.并不满意.都是要么全部请求,要么部分请求.
费用系统中是发起了请求,然后报404错误(伪地址的方式实现的)这种带来的缺陷是依旧发起了http请求,在
页面中大量存在combogrid的话就会问题突出.
因此在新的mcp2.0中我们尝试着首次加载10个,但这10条数据并不一定有意义,也就意味着还是浪费了带宽.
在对比全网分析下,依旧没有好的方案.找到官方demo一个一个查看分析.最后得出如下思路.

1.url初始化为空,直接不请求
2.在点击下拉时候再去请求
3.键入空格之后再起请求.简言之就是按需加载,多余走开.

onShowPanel: 是核心部分改造.

以下是代码
$(‘#divorder‘).find(‘#CustomerID‘).combogrid({
panelWidth: 400,
idField: ‘PartnerID‘,
mode: ‘remote‘,
textField: ‘PartnerNameCN‘,
method: ‘get‘,
url:‘‘,
fitColumns: true,
columns: [[
{ title: ‘ID‘, field: ‘PartnerID‘, hidden: true },
{ title: ‘中文名称‘, field: ‘PartnerNameCN‘, align: ‘left‘, width: 300 },
{ title: ‘业务伙伴代码‘, field: ‘PartnerCode‘, width: 100, align: ‘left‘ },
{ title: ‘联系人‘, field: ‘ContactPerson‘, align: ‘left‘, hidden: true },
{ title: ‘电话‘, field: ‘Tel‘, align: ‘left‘, hidden: true },
{ title: ‘地址‘, field: ‘Address‘, align: ‘left‘, hidden: true },
]], onShowPanel: function () {
$(‘#CustomerID‘).combogrid(‘grid‘).datagrid(‘options‘).url = ‘/Master/Partner/GetPartnerListForCombox?keyValue =‘+"";
$(‘#CustomerID‘).combogrid(‘grid‘).datagrid(‘reload‘);

},
});

以上是我的分享,关键是思路.代码非常简单.希望大家在新的项目中使用此方法.感谢!