javascript - 无法相应地模板化 select2 插件

标签 javascript jquery jquery-select2

我需要模板化 jquery Select2 插件结果,但我似乎无法识别我的自定义变量。 我的 Select2 配置:

$('.idWorker').select2(
    {
       templateResult: formatWorker  
    }
);

我的formatWorker函数:

function formatWorker (worker) {
console.log(worker);
var markup = worker.id+'<p>'+
worker.name+'<p>'+
worker.available+'<p>';
return markup;
}

生成 worker 数据的 PHP:

public function get($id = null)
{
    if($id != null)
    $this->db->where("id = {$id}");
    $query = $this->db->get('worker');
    if($query->num_rows() >= 1)
    {
        return $query->result();
    }
}

生成 select2 数据的 PHP:

public function customSelect2()
{
    $array = array();
    foreach ($this->get() as $worker)
    {
       $this->db->select("count(tkal.id) as resultcount from token_allocate tkal
        left join worker w on w.id = tkal.idWorker
        where tkal.idWorker = {$worker->id}");
        $query = $this->db->get()->result()[0];
        $available = ($query->resultcount >= 1) ? "this person has been called to attend to {$query->resultcount} tokens" : 'this person is available';
       $array[] = array('id' => $worker->id,'name' => $worker->name, 'available' => $available); 
    }
    return $array;
}

这是奇怪的部分,在我的 js 控制台日志中,对于每个工作人员,它都会打印以下内容:

Object {selected: false, disabled: false, text: "22", id: "id", title: ""…}
Object {selected: false, disabled: false, text: "Moisés Adriano Lago de   Almeida", id: "name", title: ""…}
Object {selected: false, disabled: false, text: "this person is available", id: "available", title: ""…}

为什么它为数据库中的每个工作创建 3 个对象?我的意思是,看看我的控制台打印的有关 formatWorker 函数的内容。

为什么我不能像这样使用我在 php 中设置的变量?

var markup = worker.id+'<p>'+
worker.name+'<p>'+
worker.available+'<p>';
return markup;

最佳答案

根据控制台中显示的内容,您似乎没有设置 <select>适本地。这可能是因为数组如何转换为 <option>标签,这似乎不是您所期望的。

您正在将数组创建为

array(
    'id' => $worker->id,
    'name' => $worker->name,
    'available' => $available
);

这似乎正在创建以下一组 <option>标签。

<option value="id">$worker->id</option>
<option value="name">$worker->name</option>
<option value="available">$available</option>

基于此,应该清楚数组中的每个索引都被转换为 <option> ,这就是为什么您会看到每个工作人员的三个选项被记录到控制台。

现在,您显然正在寻找一个 <option>每个 worker ,你期待 id稍后发送回服务器端。所以一个可能的<option>每个 worker 的标签可能是

<option value="$worker-id">$worker->name ($available)</option>

使用 PHP 中的数组可以轻松实现这一点。

$worker_array = array();
$worker_array[$worker->id] = $worker->name . " (" . $available . ")";
$array[] = $worker_array;

并且取决于您用于创建 <option> 的框架标签,您也许可以附加 data-*它们的属性,这可以让你有一个看起来像的选项

<option value="$worker->id" data-available="$available">$worker->name</option>

还有你的templateResult函数只需看起来像

function formatWorker (obj) {
  var available = obj.element ? $(obj.element).data('available') : '';
  return obj.id + '<p>' + obj.text + '<p>' + available;
}

否则你将不得不解析obj.text中的最后一组括号。找出名称和状态。

关于javascript - 无法相应地模板化 select2 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30490032/

相关文章:

javascript - 为什么我不能拆分一个字符串然后调用每个字符串?

javascript - jquery-ui 自动完成似乎没有触发?

javascript - select2 4.0.0 无法选择具有远程数据的项目

javascript - 在我的服务器上配置 JavaScript Google Maps API 时出现问题

javascript - 为什么/如何在 JavaScript 中使用对象?

Javascript 日期比较奇怪的行为

javascript - 弹跳球动画不起作用

html - 如何为每个 select2 选项使用不同的颜色?

robotframework - 使用 Robot Framework 从带有远程数据的 select2 中选择一个项目

javascript - 如何使用 React-Chartkick 为 Chart.js BarCharts 设置附加选项