簡單的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});
    }
}