简单的H-UI的增删改查

刚开始接触H-UI，就立马上手开始做一个简单的增删改查了。

/*
    参数解释：
    title    标题
    url        请求的url
    id        需要操作的数据id
    w        弹出层宽度（缺省调默认值）
    h        弹出层高度（缺省调默认值）
*/
function layer_show(title,url,w,h){
    if (title == null || title == '') {
        title=false;
    };
    if (url == null || url == '') {
        url="404.html";
    };
    if (w == null || w == '') {
        w=800;
    };
    if (h == null || h == '') {
        h=($(window).height() - 50);
    };
    layer.open({
        type: 2,
        area: [w+'px', h +'px'],
        fix: false, //不固定
        maxmin: true,
        shade:0.4,
        title: title,
        content: url
    });
}

这块代码，就是修改跟新增要用到的。由辉封装在 h-ui.admin.page.js里

刚开始看上面有id属性。还以为还有封装一个方法呢。最后发现是没有，只能把编辑的id跟在url 后面一起带过来。

页面数据展示

  这里用到的是jquery.datatable.js

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    var table;
    $(function () {
        table = $('.table-sort').dataTable({
            "aaSorting": [[8, "desc"]],//默认第几个排序
            "bStateSave": true,//状态保存
            "searching":false,
            "aoColumnDefs": [
                {"orderable": false, "aTargets": [0, 3]}// 制定列不参与排序
            ]
        });
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->

在js中定义下form的id .dataTable就可以展示数据了。当然数据格式你得对才行，要不打死你都没毛数据出来

<table class="table table-border table-bordered table-hover table-bg table-sort">
            <thead>
            <tr class="text-c">
                <th width="25"><input type="checkbox" name="" value=""></th>
                <th width="150">联系电话</th>
                <th width="40">邮箱</th>
                <th width="70">创建时间</th>
                <th width="130">状态</th>
                <th width="100">操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${page.list}" var="c">
                <tr class="text-c">
                    <td><input type="checkbox" value="${c.ifaceClientId}" name="checkbox"></td>
                    <td>${c.telephone}</td>
                    <td>${c.email}</td>
                    <td><fmt:formatDate value="${c.createTime}" pattern="yyyy-MM-dd"/></td>
                    <td class="td-status"><span class="label label-success radius">${c.clientStatus}</span></td>
                    <td class="td-manage">
                        <a title="编辑" href="javascript:;"
                           onclick="layer_show('编辑','editUI.html?id=${c.id}','550','500')"
                           class="ml-5" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6df;</i>
                        </a>
                        <a title="删除" href="javascript:;"
                           onclick="remove('/deleteBatch.json','${c.id}')" class="ml-5"
                           style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6e2;</i>
                        </a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>

后台数据。我是直接跳页面，把值带过来。不是通过ajax来拿值的，后面再把ajax拿值的补上

 /**
   * 授权用户list
   *
   * @param request
   * @param response
   * @return
   */
  @RequestMapping(value = "list")
  public String list(
      HttpServletRequest request,
      HttpServletResponse response,
      Student student,
      Model model) {
    Page<Student> page =
        studentService.findPage(new Page<Student>(request, response), student);
    model.addAttribute("page", page);
    return "modules/user_list";
  }

这种老特么简单了。当然我在简单的情况下直接用这种。

下面是我自己封装的提交表单以及批量删除的js

/**
 * 提交表单
 * 适用场景：form表单的提交，主要用在用户、角色、资源等表单的添加、修改等
 * @param {Object} commitUrl 表单提交地址
 */
function commit(formId, commitUrl) {
    //组装表单数据
    var index;
    var data = $("#" + formId).serialize();
    $.ajax({
        type: "POST",
        url: commitUrl,
        data: data,
        dataType: "json",
        success: function (resultdata) {
            if (resultdata.success) {
                parent.layer.close(index);
                layer.msg(resultdata.message, {icon: 1, time: 2000});
                setTimeout('window.parent.location.reload()', 1000);
            } else {
                layer.msg(resultdata.message, {icon: 5});
            }
        },
        error: function (data, errorMsg) {
            layer.close(index);
            layer.msg(data.responseText, {icon: 2});
        }
    });
}

/**
 * 表单的删除
 * @param url 删除地址
 * @param id  删除id 如果是批量，可以不写
 */
function remove(url, id) {
    var selectList;
    if (id != null) {
        selectList = id;
    } else {
        selectList = jQuery(".table tbody input[type=checkbox]:checked").map(function () {
            return jQuery(this).val();
        }).get().join(',');
    }
    if (selectList != null && selectList != '') {
        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    "ids": selectList
                },
                dataType: "json",
                success: function (resultdata) {
                    if (resultdata.success) {
                        layer.msg(resultdata.message, {icon: 1, time: 2000});
                        setTimeout('window.location.reload()', 1000);
                    } else {
                        layer.msg(resultdata.message, {icon: 5});
                    }
                },
                error: function (errorMsg) {
                    layer.msg('服务器未响应,请稍后再试', {icon: 3});
                }
            });
        });
    } else {
        layer.msg("你没有选择行", {icon: 0});
    }
}

 

转载于:https://www.cnblogs.com/xuerong/p/8688293.html