如何同时将表格中的多个文本单元格转换为带样式的下拉菜单？

24 浏览
0 Comments

如何同时将表格中的多个文本单元格转换为带样式的下拉菜单？

我有一个插件（https://github.com/olivM/jQuery-Selectbox），它填充了一个下拉选择框并样式化了下拉框。

根据以下方法，我无法通过代码中的事件处理程序对下拉框的元素修改进行detach和attach操作。

我只能在firebug检查器中手动操作。

$('#elem').selectbox('detach');
$('#elem').selectbox('attach');

我需要怎么做才能将selectbox detach然后再attach到html下拉框上？

方法      描述
attach  .selectbox("attach")    将select box附加到jQuery选择器上。这将隐藏元素并创建其自定义替代品。
change  .selectbox("change")    更改select box的选定属性。
close   .selectbox("close")     关闭已打开的select box。
detach  .selectbox("detach")    完全移除select box的功能。这将使元素返回到初始化前的状态。
disable .selectbox("disable")   禁用select box。
enable  .selectbox("enable")    启用select box。
open    .selectbox("open")  打开已附加的select box。
option  .selectbox("option", options)   获取或设置select box的任何选项。如果未指定值，则将作为getter。

0

2 答案

0 Comments

最近对这个库进行的修改解决了这个问题。我在this._defaults中添加了3行代码（onBind、onInit、onDetach）。

在_initSelectbox方法中添加了以下代码：

self._initSelectBox(target);

sbSelector.appendTo(sbHolder);

sbOptions.appendTo(sbHolder);

sbHolder.insertAfter($target);

$("html").on('mousedown', function(e){

e.stopPropagation();

$("select").selectbox('close');

});

$([".", inst.settings.classHolder, ", ,", inst.settings.classSelector].join("")).mousedown(function(e){

e.stopPropagation;

});

self._bindSelectbox(target);

在_detachSelectbox方法中添加了以下代码：

var onDetach = this._get(inst, 'onDetach');

if (onDetach != null)

{

onDetach.apply({inst.input ? inst.input[0]: null), [inst]);

}

之后我添加了Init和Bind方法：

_initSelectbox: function (target){

var onInit, inst = this._getInst(target);

if (inst) {

onInit = this._get(inst, 'onInit');

if (onInit != null)

{

onInit.apply({inst.input ? inst.input[0]: null), [inst]);

}

}

},

_bindSelectbox: function (target){

var onBind, inst = this._getInst(target);

if (inst) {

onBind = this._get(inst, 'onBind');

if (onBind != null)

{

onBind.apply({inst.input ? inst.input[0]: null), [inst]);

}

}

}

调用代码（AngularJS）：

function bindDrodown(selector)

{

angular.forEach($(".selector").function(elem){

//将span值设置为下拉框的选中值

id = $(elem).attr("id");

itemid = $("#"+id).data("itemid");

setDrowDownValue(elem);

setSpanValue(itemid);

});

$(selector).selectbox({

onInit: function (inst){

},

onBind: function (inst){

},

onChange: function (id, inst){

//更改代码在这里

},

onDetach: function(inst){

}

});

}

0
0 Comments

我遇到的问题不是代码没有执行，而是获取数据的异步性质。

添加了一个超时解决了这个问题。

setTimeout(function(){
  $('#elem').selectbox("detach");
  $('#elem').selectbox("attach");
}, 10);

HTML脚本

$(function () {
  $('#elem').selectbox("attach");
});

获取下拉列表的代码-位于angular控制器中

$http.get('some json resource').success(function(data){
  $scope.States = data;
  $scope.abbreviation = data[0].abbreviation;
  setTimeout(function(){ 
    $('#elem').val($scope.abbreviation);
    $('#elem').selectbox("detach");
    $('#elem').selectbox("attach");
  }, 10);
});

为什么不为您的下拉列表人口设定一个回调函数，在下拉列表填充后执行这个回调函数？我认为最好尽量避免使用超时。

谢谢您的建议。在我的情况下，您是否建议我修改库以添加一个新的回调函数？如果可能的话，您能提供一个示例吗？

我不太确定您的程序结构，所以很难说-如果您能提供一些上下文，并展示您在程序中尝试执行attach和detach的位置，那将会很有帮助。

我修改了我的答案，加入了更多的代码。如果对您有帮助，请告诉我。

啊，好的！所以我建议您不要使用$.get()包装器，而是直接使用$.ajax()，然后在其中有一个success函数以及一个complete函数，应该可以解决问题。看一下这里-stackoverflow.com/a/23283596/1887101

好的，这很有帮助，非常感谢您提供的资源！

0