前端H+框架的常规操作

H+源码

放大查看

{
    "data": "remark",
    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
        var html = sData;
        if (sData.length > 10) {
            $(nTd).attr("title", sData);
            var reason = sData.substring(0, 10) + "...";
            html = '<a style="width: 140px;overflow:hidden" data-reason="' + sData + '"    onclick="showHide(this)">' + reason + '</a>';
        }
        $(nTd).html(html);
    }
},

enter按钮事件

	document.onkeyup = function(e){ 
    if (e == null) { 
        _key = event.keyCode;
    } else { // firefox              //获取你按下键的keyCode  
        _key = e.which;          	 //每个键的keyCode是不一样的  
    }  
    if(_key == 13){  				 //判断keyCode是否是13，也就是回车键(回车的keyCode是13)  
        login();
    }  
};

获取单个对象信息

// 获取单个运维人员信息
function getObj(id) {
    var oneObj = null;
    axios.get(ctx + "/admin/owner/get?id=" + id)
        .then(function (res) {
            if (!res.data.success) {
                layer.msg(res.data.info, {icon: 2});
                return;
            }
            oneObj = res.data.data;
            fillObjModify(oneObj);
        })
        .catch(function () {
            layer.msg('网络异常', {icon: 5});
        });
}

// 填充页面信息
function fillObjModify(oneObj) {
    $("#modifyModel").find("input[name=modifyNickName]").val(oneObj.nickName);
    $("#modifyModel").find("input[name=showAccount]").val(oneObj.account);
    $("#modifyModel").find("input[name=modifyAccount]").val(oneObj.account);
    $("#modifyModel").find("input[name=modifyPhone]").val(oneObj.phone);
}

可输入搜索框

1.jsp
<div class="form-group">
    <div class="input-group">
     <span class="input-group-btn">
         <button class="btn btn-primary width-button" type="button"> <font>归属联营方：</font></button>
     </span>
     <select id="addClientId" name="clientId"  class="chosen-select form-control"></select>
    </div>
</div>

2.js
function loadClient(id) {
    var url = ctx + "/admin/client/query-name";
    axios.get(url)
        .then(function (res) {
            clientObj = res.data.data;
            $("#addClientId").html("<option     value=''>请选择归属联营方</option>");
            if (!clientObj || clientObj.length <= 0) {
                $("#addClientId").trigger("chosen:updated");
                return;
            }
            for (i = 0; i < clientObj.length; i++) {
                if (clientObj[i].name != null &&     clientObj[i].name != "") {
                    if (id == clientObj[i].id) {
                        $("#addClientId").append('<option     value="' + clientObj[i].id + '"     selected>' + clientObj[i].name + '(' +     clientObj[i].account + ')</option>');
                    } else {
                        $("#addClientId").append('<option     value="' + clientObj[i].id + '">' +     clientObj[i].name + '(' +     clientObj[i].account + ')</option>');
                    }
                }
            }
            $("#addClientId").trigger("chosen:updated");
        })
        .catch(function (res) {
            layer.msg("网络异常", {icon: 5});
        })
    }
    
//必须
$("#addClientId").chosen({
    width: '100%',
    search_contains: true,
    no_results_text: ''
});

删除

function del(_this) {
    var url = "/admin/address-point/del";
    layer.confirm("确认删除吗？", {skin: 'layui-layer-molv', title: '系统提示'}, function (layero, index) {
        var obj = {};
        obj['id'] = $(_this).attr("data-id");
        obj['ownerId'] = $(_this).attr("data-ownerId");
        axios.post(url, obj).then(function (data) {
            if (!data.data.success) {
                layer.msg(data.data.info, {icon: 2});
                return;
            }
            layer.msg(data.data.info, {icon: 6});
            loadtable();
        })
            .catch(function (data) {
                layer.msg('网络异常', {icon: 5});
            });
    })
}

返回主列表

function goList() {
    // location.href = ctx + "/admin/address-point/go/list";
    $(window.parent.document).find(".page-tabs-content").find(".active").find("i").trigger("click");
}

正则表达式

电话: var phoneReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;

提交检查

function checkAdd() {
    if ($("#addNickName").val() == null || $("#addNickName").val() == "") {
        layer.msg("运维人员名称不能为空", {icon: 2});
        return false;
    }
    if (!phoneReg.test($("#addPhone").val())) {
        layer.msg("手机号为空或格式错误", {icon: 2});
        return false;
    }
    return true;
}

加载列表

var myTable
var queryObj = {
    account: '',
    addressPoint: '',
    name: '',
    beginTime: '${beginTime}',
    endTime: '${endTime}',
    sn: '',
    orderCode: '',
    useState: ''
}
//加载列表
loadData();
   function loadData() {
    $("#selectAll").iCheck("uncheck");
    if (myTable) {
        myTable.destroy();
    }
    myTable = $('.datatable').DataTable({
        "bLengthChange": false,// 去掉每页多少条框体
        "pageLength": 30,
        "bFilter": false,
        "serverSide": true,
        "processing": false,
        "bAutoWidth": false,
        "pagingType": "full_numbers",
        "fnDrawCallback": function () {
            $("#DataTables_Table_0_info").append(" 跳转到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:27px;'> 页<input type='button' class='btn btn-info' id='jump' value='go'> ");
            var oTable = $(".datatable").dataTable();
            // $("#searchNum").html("搜索数:" + oTable.fnSettings()._iRecordsDisplay);
            var redirectPage = 0;
            //跳转
            $('#jump').bind("click", function () {
                if ($("#changePage").val() && $("#changePage").val() > 0) {
                    redirectPage = $("#changePage").val() - 1;
                }
                oTable.fnPageChange(redirectPage);
            });
            $('#selectHtml').html('<input type="checkbox" class="check-all-btn" id="selectAll" name="selectAll" onclick="selectAll()"/>');
            //把该页的ids存入map
            map[oTable.fnSettings()._iDisplayStart] = ids;
            //清空
            ids = [];
            selectAll(oTable.fnSettings()._iDisplayStart);
            $('input[type="checkbox"]').iCheck({
                checkboxClass: 'icheckbox_square-green',
            });
        },
        "ajax": {
            "async": true,
            "url": ctx + "/admin/order/search-robber",
            "type": "post",
            "data": queryObj,
        },
        "ordering": false,
        "columns": [
            {
                "data": "id",
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    var html = '<div class="ids "><input type="checkbox" class="selected" value="' + sData + '" name="selectId"></div>';
                    ids.push(sData);
                    $(nTd).html(html);
                }
            },
            {
                "data": "id",
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html(myTable.page.info().start + iRow + 1);
                }
            },
            {"data": "orderCode"},
            {"data": "sn"},
            {"data": "clientName"},
            {"data": "clientAccount"},
            {"data": "addressPoint"},
            {"data": "robberNums"},//恶意刷单次数
            {"data": "robberLastTime"},//最新触发时间
            {"data": "useStateStr"},//使用状态
            // {"data": "id"},
            {
                "data": "id",
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    var html = '';
                    let beginTime = $("#beginTime").val();
                    let endTime = $("#endTime").val();
                    html += '<a class="btn-sm btn btn-primary newTab" title="详情" style="margin-right:5px;" data-url="' + ctx + '/admin/robber/go/detail?orderId=' + sData + '&beginTime=' + $("#beginTime").val() + '&endTime=' + $("#endTime").val() + '">详情</a>';
                    if (oData.useState == 10) {
                        html += '<a class="btn-sm btn btn-primary" style="margin-right:5px;" onclick="change(this); " data-id="' + sData + '"  data-state="20">冻结</a>';
                    }
                    if (oData.useState == 20) {
                        html += '<a class="btn-sm btn btn-primary" style="margin-right:5px;" onclick="change(this);" data-id="' + sData + '" data-state="10">开启</a>';
                    }
                    ;
                    $(nTd).html(html);
                }
            },
        ],
        "drawCallback": function (settings, json) {
            $("tbody tr").on("click", function () {
                $("tbody tr").each(function (i) {
                    $(this).find("td").each(function (i) {
                        $(this).removeClass('trbg');
                    });
                });
                $(this).find("td").addClass('trbg');
            });
        },

    });
    //监听一下上一页下一页的点击事件
    $(".dataTables_paginate").on("click", "a", function () {
        i = 1;
    });
}