tp5+bootstrap+ajax进行基本的CRUD

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

需要解决的问题如下：

1.表格如何根据数据库动态显示？
2.添加修改部门的弹窗怎么显示？
3.批量删除如何识别checkbox是否进行了选择？
4.如何用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>
{/volist}

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">&times;</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 ids;
}

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 json_encode(obj);