jqgrid 动态设置筛选列 下拉框的值 详细代码

下面是一个使用 jqGrid 动态设置筛选列下拉框的值的示例代码：

// 定义一个全局变量用于保存下拉框的值
var selectOptions = {};

// 定义一个函数用于获取下拉框的值
function getSelectOptions(colName) {
  // 判断是否已经获取过该列的下拉框值
  if (selectOptions[colName]) {
    // 如果已经获取过，直接返回保存的值
    return selectOptions[colName];
  } else {
    // 如果没有获取过，发送请求获取下拉框的值
    $.ajax({
      url: 'getSelectOptions.php',
      type: 'GET',
      data: { colName: colName },
      success: function(data) {
        // 将获取到的值保存到全局变量中
        selectOptions[colName] = data;
      }
    });
  }
}

// 初始化 jqGrid
$('#grid').jqGrid({
  url: 'getData.php',
  datatype: 'json',
  colNames: ['ID', 'Name', 'Gender'],
  colModel: [
    { name: 'id', index: 'id', width: 50 },
    { name: 'name', index: 'name', width: 100 },
    { name: 'gender', index: 'gender', width: 100, stype: 'select', searchoptions: { value: ':All;' } }
  ],
  rowNum: 10,
  rowList: [10, 20, 30],
  pager: '#pager',
  sortname: 'id',
  viewrecords: true,
  sortorder: 'asc',
  caption: 'My Grid',
  // 在 jqGrid 初始化完成后动态设置下拉框的值
  loadComplete: function() {
    // 获取列的名称
    var colName = $('#grid').jqGrid('getGridParam', 'colModel')[2].name;
    // 获取下拉框的值
    var selectValues = getSelectOptions(colName);
    // 将下拉框的值设置到筛选列中
    $('#grid').jqGrid('setColProp', colName, { searchoptions: { value: selectValues } });
  }
});

上面的示例中，我们定义了一个全局变量 `selectOptions` 用于保存下拉框的值，然后定义了一个函数 `getSelectOptions` 用于获取下拉框的值。在 jqGrid 初始化完成后，我们调用 `getSelectOptions` 函数获取下拉框的值，并将其设置到筛选列中。在筛选列中，我们使用 `stype: 'select'` 来指定使用下拉框作为筛选方式，然后使用 `searchoptions` 属性设置下拉框的值。