Question

我有一个Grails项目，我正在使用 [jquery dual listbox plugin]填充box2（已授予），其中包含来自box1（可用）的选项。

我的问题是，如果记录已存在（更新），则已选中的选项不会显示在框2中。所有选项都显示在方框1中，就好像它们尚未被选中一样。如何从box1（可用）中删除所选选项并将它们显示在box2（已授予）中？

当使用Grant / Deny按钮时，jquery双列表插件正在将项目从box1移动到box2，反之亦然。

edit.gsp中的Javascript：

$(function() {
    $.configureBoxes({
        transferMode: 'move',
        useFilters: false,
        useCounters: false,
        box1View: 'available',
        box2View: 'granted',
        to1: 'toAvail',
        to2: 'toGranted'
    });
});

在edit.gsp中选择：

<table>
        <tr>
            <td>
                Available<br/>
                <g:select name="available"
                          id="available"
                          from="${availableList}"
                          value="${user?.granted}"
                          optionKey="id"
                          multiple="multiple"
                          style="height:200px;"
                />
            </td>
            <td>
                <button id="toGranted" type="button" class="button_right">Grant</button>
                <br/>
                <button id="toAvail" type="button" class="button_left">Deny</button>

            </td>
            <td>
                Granted<br/>
                <g:select name='granted'
                          id="granted"
                          from="[]"
                          multiple="multiple"
                          style="height:200px;" />
            </td>
        </tr>
    </table>

为了使事情稍微复杂一点，可以从edit.gsp中的另一个选择的onChange事件填充框1（可用）：

<g:select name="parent" id="parent"
                              from="${Parent.list()}"
                              optionKey="id"
                              noSelection="[null:'']"
                              value="${user?.parent}"
                              onchange="${remoteFunction(
                                    controller: 'user',
                                    action: 'ajaxGetAvailable',
                                    onSuccess: 'updateAvailable(data)',
                                    params: '\'id=\' + this.value')}"
                    />

function updateAvailable(data) {
  var $element = $('#available');
  var $granted = $('#granted');
  $element.empty();
  $granted.empty();
  $.each(data, function(i, item) {
    $element.append($('<option>').val(data[i].id).text(data[i].name))
  });
}

上面的函数使用来自控制器的JSON对象：

   def ajaxGetAvailable = {
        def parent = Parent.get(params.id)
        render parent?.available as JSON
   }

上面引用的类：

class Parent {
   static mapWith = "mongo"

   String entityId
   String name

   static hasMany = [ available: Entity ]
}

class Entity {

  static mapWith = "mongo"

  String entityId
  String name

  static belongsTo = [parent:Parent]
}

Answer 1

您授予的选择权限为from="[]"。您需要更改from，以便它包含已保存到数据库（或任何地方）的已授予项目的集合。

此外，您需要在渲染视图（在控制器中）之前从availableList过滤掉已授予的项目。

Answer 2

通过更新Available和Granted选项解决了该问题。请注意在“from”上使用Groovy从Available options中删除Granted选项。

<g:select name="available"
          id="available"
          from="${availableList - user?.granted}"
          value="${user?.granted}"
          optionKey="id"
          multiple="multiple"
          style="height:200px;"
 />

<g:select name='granted'
          id="granted"
          from="${user?.granted}"
          multiple="multiple"
          optionKey="id"
          style="height:200px;" 
 />

动态加载选择使用jquery双列表框插件

2 个答案: