layui 实现点击按钮添加一行

1:用ajax请求将数据取出存于变量,将变量赋值给table的data

  var organData = [];
  $.ajax({
        url: baseUrl+'/org/getSysOrgList'
        ,type:"POST"
        ,async:false
        ,dataType:"json"
        , success: function(result){
            organData=result;
        }
  });

2.将数据通过data方式传值

table.render({
        elem: '#organ-manage-list'
        ,data:organData
        ,method:'POST'
        ,cols: [[
         {field: 'orgCode', width: 100, title: '组织编码', sort: true}
        ,{field: 'orgName', title: '组织名称', width: 200}
        ,{field: 'pOrgCode', title: '上级行政组织', width: 100}
        ,{field: 'orgModal', title: '组织形态', width: 100}
        ,{field: 'isSelfOrg', title: '是否核算组织', width: 100}
        ,{field: 'status', title: '启/停用', width: 100}
        ,{field: 'updTime', title: '更新时间', width: 200}
        ,{title: '操作',align:'center', fixed: 'right', toolbar: '#table-organ-operator'}
        ]]
        ,page: true
        ,limit: 10
        ,height: 'full-220'
        ,done: function(res, curr, count){
              //如果是异步请求数据方式,res即为你接口返回的信息。
              //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
                sessionStorage.setItem("countTemp",count);
              }
        ,text: '对不起,加载出现异常!'
  });

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现编辑列表某一行的功能,你可以使用 layui表格组件和弹出层组件。 首先需要在表格添加编辑按钮,点击编辑按钮弹出弹出层,显示当前行的数据,并提供修改和保存操作。具体步骤如下: 1. 在表格添加编辑按钮列: ```javascript {field: 'operation', title: '操作', templet: '#operationTpl'} ``` 2. 在模板中定义编辑按钮的内容: ```html <script type="text/html" id="operationTpl"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> </script> ``` 3. 监听表格的工具条事件,在事件回调函数中判断是否点击了编辑按钮: ```javascript table.on('tool(test)', function(obj){ var data = obj.data; if(obj.event === 'edit'){ // 编辑操作 } }); ``` 4. 在编辑操作中弹出弹出层,并显示当前行的数据: ```javascript layer.open({ type: 1, title: '编辑', content: $('#editForm'), success: function(layero, index){ // 将当前行的数据填充到表单中 form.val('editForm', data); }, btn: ['保存', '取消'], yes: function(index, layero){ // 保存操作 }, btn2: function(index, layero){ // 取消操作 layer.close(index); } }); ``` 5. 弹出层中的表单需要使用 layui 的 form 组件,表单的 HTML 代码如下: ```html <form class="layui-form" lay-filter="editForm"> <div class="layui-form-item"> <label class="layui-form-label">名称</label> <div class="layui-input-block"> <input type="text" name="name" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">地址</label> <div class="layui-input-block"> <input type="text" name="address" required lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input"> </div> </div> <!-- 其他表单项 --> </form> ``` 6. 在保存操作中获取表单数据并更新当前行的数据: ```javascript form.on('submit(saveBtn)', function(data){ // 更新当前行的数据 obj.update({ name: data.field.name, address: data.field.address, // 其他表单项 }); layer.close(index); return false; }); ``` 这样就可以实现编辑列表某一行的功能了。完整代码示例可以参考下面的链接: https://www.layui.com/doc/modules/table.html#table-toolbar
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值