给按钮添加原因的输入框

1.写好div样式

<!--添加reason输入框 -->
<div id="openReason" class="easyui-window" data-options="title:'添加原因',minimizable:false,collapsible:false,maximizable:false,resizable:false,modal:true,closed:true" style="width:400px;height:130px;">
<div >
<h1 style="text-align: center;padding-top: 15px;">输入原因:<input id="reason" data-options="required:true,missingMessage:'请输入原因'" style="width:180px;height:25px;border:solid 1px black"></h1>
</div>
<div style="text-align:center;padding-top: 15px;">
<a href="#" οnclick="openReasonEdit()" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style=" margin-left:10px;">确定</a>
<a href="#" οnclick="$('#openReason').window('close');" class="easyui-linkbutton" style=" margin-left:10px;" data-options="iconCls:'icon-no'">取消</a>
</div>
</div>

2.编写openReasonEdit()方法实现添加原因并跳转到Action

 function openReasonEdit(){
var reason=document.getElementById("reason").value;
var select = $('#merchantOnline').datagrid('getSelections');
                    var id=select[0].id;
var selects = $('#detailData').datagrid('getSelections');
                    var macs="";
                    for (var i = 0; i < selects.length; i++) {
                                if (i == selects.length - 1) {
                               
                                    macs += selects[i].mac;
                                }
                                else {
                                    macs += selects[i].mac + "-";
                                }
                            }
$.ajax({
type : "POST",
url : "Black_addblackList",
data :"macs="+macs+"&reason="+reason+"&id="+id,
success : function(msg) {
alert(msg);
$("#openReason").window('close');
}
});
            }  

3.当点击加入黑名单按钮是出发上面事件

buttons: [{ 
                    iconCls: 'icon-cancel',
text : '加入黑名单',
                        handler: function(){
                         var selects = $('#detailData').datagrid('getSelections');
                          if (selects == 0) {
                               alert("请选择需要加入黑名单的用户!");
                               return;
                          }
                          //添加原因弹框
                          $("#openReason").window('open');
                         
                       } 
                    }]

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于 vxetable,您可以使用特定的插槽来实现这个功能。具体地说,您可以使用 `vxe-toolbar` 的插槽来创建一个自定义的工具条,并在其中添加一个按钮。当用户点击该按钮时,您可以使用 `vxe-grid` 的 `addColumn` 方法来添加一个新的列。这个新的列可以是一个输入框或任何其他您需要的元素。 以下是一个简单的示例代码,用于在 `vxe-grid` 中添加一个按钮,并在点击该按钮添加一个新的输入框列: ```html <template> <div> <vxe-grid ref="grid" :columns="columns" :data="data" :toolbar="toolbar" @toolbar-button-click="handleToolbarButtonClick" ></vxe-grid> </div> </template> <script> import { VXETable, VxeGrid, VxeToolbar } from 'vxe-table' export default { components: { VxeGrid, VxeToolbar, }, data() { return { columns: [ { field: 'name', title: 'Name' }, { field: 'age', title: 'Age' }, ], data: [ { name: 'John Doe', age: 30 }, { name: 'Jane Doe', age: 25 }, ], toolbar: { slots: { buttons: () => { return [ { name: 'add-input', type: 'button', icon: 'mdi-plus', tip: 'Add Input', }, ] }, }, }, } }, methods: { handleToolbarButtonClick(params) { if (params.name === 'add-input') { this.$refs.grid.addColumn({ field: `input-${this.columns.length}`, title: `Input ${this.columns.length}`, editRender: { name: 'MyInput', }, }) } }, }, mounted() { VXETable.renderer.add('MyInput', { renderEdit(h, renderOpts, { row }) { return <input class="my-input" value={row[renderOpts.name]} /> }, }) }, } </script> ``` 在这个例子中,我们创建了一个 `vxe-grid`,并为其添加了一个自定义的工具条。在该工具条中,我们添加了一个名为 `add-input` 的按钮,并在用户点击该按钮时触发 `handleToolbarButtonClick` 方法。在该方法中,我们使用 `addColumn` 方法来添加一个新的列,该列包含一个名为 `MyInput` 的自定义渲染器。最后,我们在 `mounted` 钩子函数中注册了名为 `MyInput` 的自定义渲染器,用于渲染新添加的列。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值