easyUI之给combobox静态赋值和动态赋值

应用场景一

在标签中静态赋值:使用<select >, <option>标签

   <label style="font-size: 15px;" class="lab">订单类别:</label>
                    <select id="orderTypeAdd" name="orderType" class="easyui-combobox"
                            data-options="valueField:'orderType',textField:'orderType',panelHeight:'auto'"
                            style="width: 200px;" required="true">
                        <option></option>
                        <option>销售合同</option>
                        <option>租赁合同</option>
                        <option>标准订单</option>
                        <option>租赁订单</option>
                        <option>RMA订单</option>
                    </select>

应用场景二

在datagrid中静态赋值：

{
                        field: 'updateType', title: '变更类别', width: 30, align: 'center', titleAlign: true,
                        editor: {
                            type: 'combobox',
                            options: {valueField: 'label', textField: 'value',  panelHeight: 'auto',data: [
                                     {label: '1',value: '数量增加'},
                                    {label: '2',value: '数量减少'},
                                    {label: '3', value: '交货时间提前'},
                                    {label: '4',value: '交货时间延后'},
                                    {label: '5',value: '料号变更'},
                                    {label: '6',value: '新增料号'},
                                    {label: '7',value: '交货地址变更'},
                                    {label: '8',value: '订单取消'}
                                    ]}
                        }
                    }

联动并给datagrid中的combobox静态赋值：
datagrid中的combobox列

  {
                    field: 'soType', title: '销单类别', width: 20, align: 'center', titleAlign: true,
                    editor: {
                        type: 'combobox',
                        options: {valueField: 'label', textField: 'value'}
                    }
                },

标签的字段：

<label style="font-size: 15px;" class="lab">订单类别:</label>
                    <select id="orderTypeAdd" name="orderType" class="easyui-combobox hideElement"
                            data-options="valueField:'orderType',textField:'orderType',panelHeight:'auto'"
                            style="width: 200px;" required="true">
                        <option></option>
                        <option>销售合同</option>
                        <option>租赁合同</option>
                        <option>标准订单</option>
                        <option>租赁订单</option>
                        <option>RMA订单</option>
                    </select>

订单类别的改变事件：
当选择不同的订单类别时，销单类别也跟着改变

 $("#orderTypeAdd").combobox({
        onChange: function (value) {
//editIndex为当前编辑的行索引
          var editors = $('#dgAdd').datagrid('getEditors', editIndex);
            if (value==='RMA订单'){
                soData=[{label: '销售退货', value: '销售退货'}];
            }else if (value==='租赁合同'||value==='租赁订单'){
                soData=[{label: '买租（现状）', value: '买租（现状）'},{label: '租租（现状）', value: '租租（现状）'},{label: '租租（维修）', value: '租租（维修）'}];
            }
       
            $(editors[8].target).combobox('loadData',soData);
         
    });

效果：

效果图2
效果图1

应用场景三

在标签中动态赋值：
标签显示如下

<label style="font-size: 15px;" class="lab">代码:</label>
 <input id="plantCodeAdd" name="plantCode" class="easyui-combobox"
                           data-options="required:true,valueField:'plantCode',textField:'plantCode',panelHeight:'auto'"
      style="width: 200px"/>

赋值如下：

$.ajax({
            url: "queryPlantCodeByAccount.do",
            type: "post",
            data: { },
            dataType: "json",
            success: function (data) {
                $('#plantCodeAdd').combobox('loadData', data.plantCodeList);
            }
        });

应用场景四

在datagrid中动态赋值：
列显示如下：

 {
                        field: 'soType', title: '销单类别', width: 20, align: 'center', titleAlign: true,
                        editor: {
                            type: 'combobox',
                            options: {valueField: 'docTypeCn', textField: 'docTypeCn', panelHeight: 'auto'}
                        }
                    },

赋值如下：
先获取此列，在进行赋值

 var editors = $('#dgAdd').datagrid('getEditors', editIndex);        //取当前的编辑器, editIndex为索引
 var smEditor = editors[8];  //8表示在datagrid中所有编辑行的第八位，从0开始
//使用ajax请求数据
  $.ajax({
            url: "queryPlantCodeByAccount.do",
            type: "post",
            data: {plantCode: plant},
            dataType: "json",
            success: function (data) {
                    $(smEditor.target).combobox('loadData', data.docTypeList);  //加载数据到combobox下拉列表中
            }
        });