tp5+bootstrap+ajax进行基本的CRUD

Posted 2022-07-08 钰娘娘ynn

界面是这样的，很简单，但是我做了好多天，因为什么都不会，所有的地方都要想办法解决。

需要解决的问题如下：

1.表格如何根据数据库动态显示？
2.添加修改部门的弹窗怎么显示？
3.批量删除如何识别checkbox是否进行了选择？
4.如何用ajax异步进行更新？

• ​​表格动态显示数据库数据​​
• ​​显示添加修改的弹窗​​
• ​​获取批量删除的选项​​
• ​​ajax进行异步更新​​

1.表格动态显示数据库数据。

使用volist进行动态处理，数据传入方式： ​​$this->assign(departs, $departs);​​​
volist动态显示方式(使用html即可)

volist name="departs" id="item"
    <tr class="change">
                    <td style="text-align:left;"><input type="checkbox" class="check" value=$i></td>
                    <td style="text-align:left;">$depart</td>
                    <td style="text-align:left;">
                        <button type="button" class="btn btn-warning" onclick=editSingle( <?php echo $i; ?>,<?php echo json_encode($departs); ?>)>修改</button>
                        <button type="button" class="btn btn-danger" onclick=delSingle(<?php echo $i; ?>,<?php echo json_encode($departs); ?>)>删除</button>
                    </td>
                </tr>

2.显示添加修改的弹窗

其实就是bootstrap的弹窗了。
js调用方式：
$(‘#myModal’).modal();句用于显示

$("#myModalLabel").text(修改部门);
 $(#myModal).modal();

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">新增</h4>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="txt_departmentname">部门名称</label>
                    <input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname"
                           placeholder="部门名称">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span
                        class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                </button>
                <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal" onclick="save()">
                    <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
                </button>
            </div>
        </div>
    </div>
</div>

3.获取批量删除的选项

checkbox需要设置value:

<td style="text-align:left;"><input type="checkbox" class="check" value=$i></td>

js获取选中的id

function getSelected()
    var ids = [];
    //意思是选择被选中的checkbox
    $.each($(input:checkbox.check:checked), function ()
        ids.push($(this).val());
    );
    return

4.ajax进行异步更新

这里需要用到jquery

$.ajax(
        type: POST,
        dataType:json,
        data:param:JSON.stringify(delIds),
        url : /index/index/deldepart,
        success:function(data)
            var obj = eval((+data+));
            if(obj.code == 1)
                alert(obj.msg);
                window.location.reload(true);
            else
                alert(obj.msg);
            
        
    );

php:

obj[code]=1;
obj[msg]="ajax成功";
return