时间戳

首页 > 解决方案 > 在可编辑数据网格中使用 optgroup 组合框

javascript - 在可编辑数据网格中使用 optgroup 组合框

问题描述

如何在没有 html 的情况下通过可编辑的数据网格来实现它？

<optgroup label="Swedish Cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</optgroup>

我在下面尝试过：

<table id="bulkchannel_edit" title='Editable DataGrid' singleSelect="true" style="width:100%; height:500px;">
 <thead>
    <tr>
     <th field="channel_name" width="100" editor="{type:'textbox'}">Channel Name</th>
     <th field="category_name" width="100" editor="{type:'combobox',
          options:{
            valueField:'channel_category_id',
            textField:'category_name',
            data:childCategories,
            groupField:parentCategories,
            required:true
          }
     }" formatter="getSelectedCategory">Category</th>
 </tr>
 </thead>
 </table>

来自以下 ajax 请求的两个组 optgroup 的数据：

var parentCategories = {};
var childCategories = {};
$(document).ready(function(){
        $.ajax({
           url: "<?php echo base_url() ?>index.php/Channels/getParentChildChannelCategories",
           dataType: 'json',
           async : false,
           success: function(response){
               console.log('response',response);
               console.log('parent_categories',response.parent_categories);
               parentCategories = response.parent_categories;
               childCategories = response.child_categories;
           }
        });
    });

我必须加载父组中的父类别和 optgroup html 中的所有子类别

谢谢。

标签： javascriptjquerydatagridjquery-easyui

解决方案

我从这里得到了 jeasyui 论坛的解决方案

var data = [
{group:'Group1',items:[
    {value:'v11',text:'Option11'},
    {value:'v12',text:'Option12'},
    {value:'v13',text:'Option13'},
    {value:'v14',text:'Option14'}
]},
{group:'Group2',items:[
    {value:'v21',text:'Option21'},
    {value:'v22',text:'Option22'},
    {value:'v23',text:'Option23'},
    {value:'v24',text:'Option24'}
]}
];
function loadFilter(data){
  var dd = [];
  for(var i=0; i<data.length; i++){
    var group = data[i].group;
    dd.push({
        group:group,
        text:group
    });
    dd = dd.concat(data[i].items);
}
return dd;
}
function onLoadSuccess(){
 var groupItems = $(this).combobox('panel').find('div.combobox- 
 item:has(span.combobox-group-text)');
 groupItems.removeClass('combobox-item');
}
function formatter(row){
 if (row.group){
    return '<span class="combobox-group-text" style="font-weight:bold">'+row.group+'</span>';
} else {
    return '<span style="padding-left:10px">'+row.text+'</span>';
}
}

$(function(){
 $('#cc').combobox({
    data:data,
    loadFilter:loadFilter,
    formatter:formatter,
    onLoadSuccess:onLoadSuccess
 });
});

推荐阅读