<i class="fa fa-plus"></i> 新增代理&" />

正常情况下,我们可以使用@click属性对一个标签添加事件,比如:

<a class="btn btn-primary" @click="addAgent"><i class="fa fa-plus"></i> 新增代理</a>
<a class="btn btn-primary" @click="addUser"><i class="fa fa-plus"></i> 新增会员</a>

这样就可以绑定vue的addAgent和addUser到对应的标签上,当点击时相应对应的事件。

但像下面这样的列表,如果使用此方法,vue并不能够进行正确解析,因为jqgrid加载到数据时,vue已经初始化完成了,特别是在分页的情况下。

如何给jqgrid获得的列表数据添加操作并绑定vue的事件?插图

针对上图的内容,下面的写法并不能成功绑定事件:

{ label: '新增', name: '', index: '', width: 80 ,formatter: operations}

function operations (value, options, row) {
return '<a class="btn btn-danger" @click="addAgent">新增代理</a>';
return '<a class="btn btn-danger" @click="addUser">新增会员</a>';
}

使用上面的形式,查看页面源代码会发现@click未被解析,而是直接显示出来,并且没有绑定成功事件。而像最上面的那种形式,则看不到@click标签,因为已经成功的将事件绑定了。

解决方案

针对上面的问题,可以通过onclick标签来解析:

{ label: '新增', name: '', index: '', width: 80 ,formatter: operations}

function operations (value, options, row) {
return '<a class="btn btn-danger" @click="vm.addAgent()">新增代理</a>';
return '<a class="btn btn-danger" @click="vm.addUser()">新增会员</a>';
}       

其中vm,就是vue初始化的对象。上面的写法当每行内容加载完成之后,便可直接通过onclick事件来调用vue的方法。

传递参数

顺便提一下,如果该方法需要传递参数,比如传递当前列的其他数据,下面以代码实例的形式展示给大家,仅供参考。

{
  label: '新增', name: '', sortable: false, width: 75,
      formatter: function (value, options, row) {
                    var upUsername = row["username"];
                    var upUserId = row["userId"];
                    return '<a class="btn btn-default" onclick="vm.addAgentId(\''+upUserId +'\',\''+upUsername+'\')">' +
                        "<span class='text-success'>代理</span></a> " +
                        '<a class="btn btn-default" onclick="vm.addUserId(\''+upUserId +'\',\''+upUsername+'\')">' +
                        "<span class='text-danger'>会员</span></a>";
                }
},

其中row[“username”]是拿到当前行的用户名的那一列,row[“userId”]同理。而具体的方法参数,直接用字符串拼接即可。

最会再看一下vue中方法的定义:

addAgentId: function (id, username) {
    vm.upUserName = username;
    //其他业务处理
},



如何给jqgrid获得的列表数据添加操作并绑定vue的事件?插图1

关注公众号:程序新视界,一个让你软实力、硬技术同步提升的平台

除非注明,否则均为程序新视界原创文章,转载必须以链接形式标明本文链接

本文链接:https://www.choupangxia.com/2019/09/07/%e5%a6%82%e4%bd%95%e7%bb%99jqgrid%e8%8e%b7%e5%be%97%e7%9a%84%e5%88%97%e8%a1%a8%e6%95%b0%e6%8d%ae%e6%b7%bb%e5%8a%a0%e6%93%8d%e4%bd%9c%e5%b9%b6%e7%bb%91%e5%ae%9avue%e7%9a%84%e4%ba%8b%e4%bb%b6%ef%bc%9f/