前端H+框架的常规操作

前端H+框架的常规操作

原创

已于 2024-10-22 12:56:08 修改

·

1.6k 阅读

·

1

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#html

#jquery

于 2020-07-30 09:56:52 首次发布

Java

专栏收录该内容

17 篇文章

订阅专栏

本文深入探讨了H+源码的细节，包括源码中涉及的JavaScript函数、DOM操作、事件监听、AJAX请求、正则表达式验证、数据表格初始化及数据处理等关键部分。文章还介绍了如何通过源码实现数据展示、输入检查、搜索框功能、删除操作及列表加载等功能。

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 = '' + reason + '';

}

$(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

2.js

function loadClient(id) {

var url = ctx + "/admin/client/query-name";

axios.get(url)

.then(function (res) {

clientObj = res.data.data;

$("#addClientId").html("请选择归属联营方");

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('' + clientObj[i].name + '(' + clientObj[i].account + ')');

} else {

$("#addClientId").append('' + clientObj[i].name + '(' + clientObj[i].account + ')');

}

}

}

$("#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(" 跳转到第 页 ");

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('');

//把该页的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 = '

';

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 += '详情';

if (oData.useState == 10) {

html += '冻结';

}

if (oData.useState == 20) {

html += '开启';

}

;

$(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;

});

}