jQuery id绑定click事件传参$("#ruleScript").click(setRuleScript（row）)

最新推荐文章于 2024-08-07 12:01:00 发布
原创 最新推荐文章于 2024-08-07 12:01:00 发布 · 2.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #click

   每次click事件传参都是通过<a onclick=aaa（bbb）></a>来传的 ，一直在想 要是通过jQuery绑定元素怎么传参，试了一下$("#ruleScript").click(setRuleScript（row）);

发现会直接调用该方法，上网查了一下，还真有办法直接传参$("#ruleScript").click(row,setRuleScript);  click(data,fn)中的data其实是json对象,取的时候,只能通过当前的事件源来取,data是默认放在event中的,所以这里的data是eventdata,引用的时候也使用event.data.name,也就是说JQuery中的所有触发时间的方法,需要传递参数都可以通过eventdata对象来传递参数:

取值的时候function setRuleScript(row){

var id  = row.data.id;

}

//注意这个data不要漏了 问题解决

可以看下这篇文章http://www.jb51.net/article/36249.htm

JQuery 在页面加载完 在$(document).ready(fn)函数里直接调用一个A标签的click事件没效果的解决方案
隔壁张同学
05-26 786
A标签的click事件没效果出现的原因：解决方案 出现的原因： 在表格的最后一列添加操作列，列的内容为超链接内容，可能是查看详情，需要调用一个a 标签的onclick方法进行操作。 $(document).ready(function () { //这里的表格没写上来(这是表格的最后一列) { title: "操作", data: "id",// 后台接口返回的json数据的key mRender: function(data, type, row,iDataIndex) {
jquery绑定元素id事件_JQuery绑定click事件的3种写法
weixin_35998457的博客
01-21 4879
1.首先你得有jquery 1.7以上的版本的js2.将js导入项目3.jsp源码<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//...
jquery $("#id").click()
lulalahappy123的专栏
04-09 2546
菜鸟在编写jquery发现了一个问题 在编写jquery的时候我直接写$("#one").click(function(){alert("..........")}); 为什么不可以呢？  必须:$(document).ready(function(){$("#one").click(function() {alert("Hello world!");});}); 这样写呢? 可以不添加$
jquery绑定元素id事件_jQuery绑定事件与事件代理
weixin_35225144的博客
01-21 923
第一步，引用jQuery！第一步，引用jQuery！第一步，引用jQuery！.on().on( events [,selector ] [,data ], handler(eventObject) ) events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin" selector：一个选择...
jquery中怎么向click方法传参
weixin_45588928的博客
09-17 1242
可以使用bind 方法为每个选择的元素事件绑定函数 语法格式：bind(type,[data],fn) 示例 $("#init").bind('click',{'id':'我是参数'},getData) function getData(e){ alert(e.data.id) } 这样就可以获取到参数了 ...
Vue实现给按钮的点击事件绑定id参数
weixin_54079103的博客
12-25 1846
Vue实现给按钮的点击事件绑定id参数。当我们需要给按钮所绑定的值做出判断并记录时，eg：为答题的正确以及题号做判断。
是之前的projectDecisionPlace 的代码风格参照这段代码实习$("#selectStoreMember").click(function(){ $("#selectStoreMember").bindQueryBtn({ type:'selectStoreMember', title:'${message("查询用户")}', bindClick:false, url:'/crm/v2/storeMember/select_member.jhtml', callback:function(rows){ if(rows.length>0){ var row = rows[0]; $(".storeMemberName").val(row.name); $(".storeMemberId").val(row.id); $(".orgName").val(row.default_sale_org_name); $(".orgId").val(row.org_id); ajaxSubmit('', { method: 'post', url: '/crm/v2/storeMember/getOrgInfo.jhtml', data: {"id": row.id}, callback: function (data) { var obj = data.objx; $(".topSaleOrgName").val(obj.topSaleOrgName); $(".topSaleOrgId").val(obj.topSaleOrgId); } }); } } }); });
09-17
| 事件绑定 | `click` + `bindQueryBtn` | `change` + `ajaxSubmit` | | 数据请求 | `ajaxSubmit` 获取用户信息 → 再次请求获取部门信息 | `ajaxSubmit` 直接获取部门信息 | | 数据填充 | 从 `row` 中提取字段 | 从...
<script> jQuery(function($) { // === Helper Functions === function getAjaxUrl() { return (window.wc_cart_params && window.wc_cart_params.ajax_url) || '<?php echo esc_url(admin_url('admin-ajax.php')); ?>'; } function getCartNonce() { const n = $('input[name="woocommerce-cart-nonce"]').val(); return n || '<?php echo wp_create_nonce('woocommerce-cart'); ?>'; } function fmtRM(n) { return 'RM' + (isNaN(n) ? 0 : n).toFixed(2); } // === 全选同步功能 === function syncSelectAllStatus() { // 获取当前所有商品是否都被选中 const allChecked = $('.item-checkbox').length === $('.item-checkbox:checked').length; // 更新表头和页脚的全选状态 $('#select-all-items-header').prop('checked', allChecked); $('#select-all-items-footer').prop('checked', allChecked); } // === 更新选中商品摘要 === function updateSelectedSummary() { let count = 0, total = 0; $('.item-checkbox:checked').each(function() { const quantity = parseFloat($(this).data('quantity')) || 1; const price = parseFloat($(this).data('price')) || 0; count += quantity; total += price; }); $('#selected-count').text(count); $('#selected-total').text(fmtRM(total)); // 同步全选状态 syncSelectAllStatus(); } // === 保存数量修改 === function saveQuantityAjax($input, showNotice = true) { if (!$input || !$input.length) return; const $row = $input.closest('tr'); const cart_item_key = $row.find('.item-checkbox').val(); const newQty = parseFloat($input.val()) || 1; $input.prop('disabled', true); $row.find('.plus, .minus').prop('disabled', true); const payload = { action: 'update_cart_item_qty', security: getCartNonce(), cart_item_key: cart_item_key, qty: newQty }; $.post(getAjaxUrl(), payload, function(response) { if (response && response.success) { const d = response.data || {}; const $checkbox = $row.find('.item-checkbox'); // 更新小计列的HTML if (d.subtotal_html) { $row.find('.product-subtotal').html(d.subtotal_html); } // 更新复选框的数据 if (d.discounted_price) { $checkbox.data('price', d.discounted_price); $checkbox.attr('data-price', d.discounted_price); } else if (d.subtotal_html) { const priceValue = parseFloat( d.subtotal_html.replace(/[^\d.]/g, '') .replace(/\.(?=.*\.)/g, '') .replace(/,/g, '') ); if (!isNaN(priceValue)) { $checkbox.data('price', priceValue); $checkbox.attr('data-price', priceValue); } } if (d.unit_price) { $checkbox.data('unit-price', d.unit_price); $checkbox.attr('data-unit-price', d.unit_price); } // 更新数量属性 if (d.adjusted_qty) { $input.val(d.adjusted_qty); $checkbox.data('quantity', d.adjusted_qty); $checkbox.attr('data-quantity', d.adjusted_qty); } // 更新库存属性 if (d.max_stock) { $input.attr('max', d.max_stock); $input.attr('data-stock', d.max_stock); } // 显示通知 if (showNotice && d.notice) { alert(d.notice); } // 更新摘要 updateSelectedSummary(); } }).always(function() { $input.prop('disabled', false); $row.find('.plus, .minus').prop('disabled', false); }); } // === 处理库存超量 === function handleOverstock($input) { const maxStock = parseInt($input.attr('data-stock')) || 0; const currentQty = parseInt($input.val()) || 0; if (maxStock > 0 && currentQty > maxStock) { $input.val(currentQty); alert(`此商品库存仅剩 ${maxStock}`); $input.val(maxStock); saveQuantityAjax($input, false); return true; } return false; } // === 心愿单功能 === function handleWishlistClick(e) { e.preventDefault(); const $btn = $(this); const productId = $btn.data('product-id'); const isInWishlist = $btn.hasClass('in-wishlist'); if (isInWishlist) { // 前往心愿单页面 window.location.href = 'https://animangabookstore.com/wishlist/'; } else { // 添加到心愿单 $btn.find('.heart-icon').css('opacity', '0.5'); $.post(getAjaxUrl(), { action: 'add_to_wishlist', security: getCartNonce(), product_id: productId }, function(response) { if (response.success) { $btn.addClass('in-wishlist') .attr('title', '浏览心愿单') .find('.heart-icon') .css('fill', 'red') .css('opacity', '1'); // 更新图标样式 $btn.find('.heart-icon').css({ 'fill': 'red', 'opacity': '1' }); } else { alert(response.data.message || '添加到心愿单失败'); $btn.find('.heart-icon').css('opacity', '1'); } }).fail(function() { $btn.find('.heart-icon').css('opacity', '1'); }); } } // === 事件绑定 === function bindEvents() { // 移除默认的WooCommerce行为 $('body').off('click', '.plus, .minus'); // 数量输入 $('.woocommerce-cart-form').on('input', '.qty', function() { handleOverstock($(this)); }); // 失焦时保存 $('.woocommerce-cart-form').on('blur', '.qty', function() { saveQuantityAjax($(this), true); }); // 按回车键保存 $('.woocommerce-cart-form').on('keydown', '.qty', function(e) { if (e.key === 'Enter') { e.preventDefault(); saveQuantityAjax($(this), true); } }); // +/- 按钮，500ms延迟 $('body').on('click', '.plus,.minus', function(e) { e.stopImmediatePropagation(); const $input = $(this).closest('.quantity').find('input.qty'); const currentQty = parseInt($input.val()) || 0; const step = $(this).hasClass('plus') ? 1 : -1; const newQty = Math.max(1, currentQty + step); $input.val(newQty); if (!handleOverstock($input)) { clearTimeout($input.data('buttonSaveTimer')); $input.data('buttonSaveTimer', setTimeout(() => { saveQuantityAjax($input, true); }, 500)); } }); // 全选功能 $('#select-all-items-header, #select-all-items-footer').change(function() { const isChecked = $(this).prop('checked'); $('.item-checkbox').prop('checked', isChecked); updateSelectedSummary(); }); // 当选择改变时更新摘要 $('.item-checkbox').change(updateSelectedSummary); // 删除选中商品 $('#remove-selected-items').click(function() { const keys = $('.item-checkbox:checked').map(function() { return $(this).val(); }).get(); if (keys.length === 0) { alert('请先选择要删除的商品'); return; } $.post(getAjaxUrl(), { action: 'remove_selected_cart_items', security: getCartNonce(), cart_item_keys: keys }, function(response) { if (response.success) { keys.forEach(function(key) { $(`.item-checkbox[value="${key}"]`).closest('tr').remove(); }); updateSelectedSummary(); } }); }); // 清空购物车 $('#clear-cart').click(function() { if (!confirm('确定要清空整个购物车吗？')) return; $.post(getAjaxUrl(), { action: 'empty_cart', security: getCartNonce() }, function(response) { if (response.success) { $('.woocommerce-cart-form__cart-item').remove(); updateSelectedSummary(); } }); }); // 应用优惠券 $('#apply-coupon').click(function() { const code = $('#coupon_code').val(); if (!code) { alert('请输入优惠券代码'); return; } $.post(getAjaxUrl(), { action: 'apply_coupon', security: getCartNonce(), coupon_code: code }, function(response) { if (response.success) { alert('优惠券应用成功!'); location.reload(); } else { alert(response.data.message || '优惠券应用失败'); } }); }); // 部分结算 $('#partial-checkout').click(function(e) { const keys = $('.item-checkbox:checked').map(function() { return $(this).val(); }).get(); if (keys.length === 0) { e.preventDefault(); alert('请至少选择一件商品结算'); return false; } sessionStorage.setItem('selected_cart_items', JSON.stringify(keys)); return true; }); // 心愿单按钮点击事件 $('body').on('click', '.wishlist-icon', handleWishlistClick); } // === 初始化 === $(document).ready(function() { // 初始化库存属性 $('.item-checkbox').each(function() { const $input = $(this).closest('tr').find('.qty'); const maxStock = parseInt($input.attr('max')) || 0; if (maxStock > 0) { $input.attr('data-stock', maxStock); } }); // 初始更新摘要 updateSelectedSummary(); // 绑定所有事件 bindEvents(); }); }); </script> without changing anything, make these code in formatted way
最新发布
09-19
$.post(getAjaxUrl(), payload, function(response) { if (response && response.success) { const d = response.data || {}; const $checkbox = $row.find('.item-checkbox'); // 更新小计列的HTML if (d....
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <th:block th:include="include :: header('教师管理列表')"/> <th:block th:include="include :: layout-latest-css"/> <th:block th:include="include :: ztree-css"/> </head> <body class="gray-bg"> <div class="ui-layout-west"> <div class="box box-main"> <div class="box-header"> <div class="box-title"> <i class="fa icon-grid"></i> 组织机构 </div> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button> <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button> <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button> </div> </div> <div class="ui-layout-content"> <div id="tree" class="ztree"></div> </div> </div> </div> <div class="ui-layout-center"> <div class="container-div"> <div class="row"> <div class="col-sm-12 search-collapse"> <form id="formId"> <div class="select-list"> <input type="hidden" id="schoolId" name="schoolId"> <input type="hidden" id="collegeId" name="collegeId"> <ul> <li> <input id="selectConditionOneInput" type="text" name="multipleOne" style="width: 200px;" placeholder="姓名|工号(账号)"/> </li> <li> <input id="selectConditionTwoInput" type="text" name="multipleTwo" style="width: 250px;" placeholder="邮箱|手机号|身份证|昵称"/> </li> <li> <label>账号：</label> <select style="width: 60px" name="state" th:with="type=${@dict.getType('accountStatus')}"> <option value="">所有</option> <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option> </select> </li> <li> <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a> <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a> </li> </ul> </div> </form> </div> <div class="btn-group-sm" id="toolbar" role="group"> <a class="btn btn-success disabled" id="addBtn" onclick="$.operate.add($('#collegeId').val())" shiro:hasPermission="system:teacher:add"> <i class="fa fa-plus"></i> 新增 </a> <a class="btn btn-danger multiple disabled" onclick="javascript:batchUpdatePwd()" shiro:hasPermission="system:teacher:batchUpdatePwd"> <i class="fa fa-sign-out"></i> 批量重置密码 </a> <a id="importBtn" class="btn btn-info disabled" onclick="importExcel()" shiro:hasPermission="system:student:export"> <i class="fa fa-upload"></i> 导入 </a> <!-- <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:teacher:export">--> <!-- <i class="fa fa-download"></i> 导出--> <!-- </a>--> <a class="btn btn-warning" onclick="$.table.exportExcelByChoose()" shiro:hasPermission="system:teacher:export"> <i class="fa fa-upload"></i> 导出 </a> <a href="/teacherTemplate.xlsx">点击下载导入模版</a> </div> <div class="col-sm-12 select-table table-striped"> <table id="bootstrap-table"></table> </div> </div> </div> </div> <th:block th:include=“include :: footer”/> <th:block th:include=“include :: layout-latest-js”/> <th:block th:include=“include :: ztree-js”/> <script th:inline="javascript"> var editFlag = [[${@permission.hasPermi('system:teacher:edit')}]]; var removeFlag = [[${@permission.hasPermi('system:teacher:remove')}]]; var genderDatas = [[${@dict.getType('sys_user_sex')}]]; var stateDatas = [[${@dict.getType('accountStatus')}]]; var prefix = ctx + "system/teacher"; $(function () { var panehHidden = false; if ($(this).width() < 769) { panehHidden = true; } $('body').layout({initClosed: panehHidden, west__size: 185}); // 回到顶部绑定 if ($.fn.toTop !== undefined) { var opt = { win: $('.ui-layout-center'), doc: $('.ui-layout-center') }; $('#scroll-up').toTop(opt); } queryTeacherList(); queryOrganizationTree(); }); function queryTeacherList() { var options = { url: prefix + "/list", createUrl: prefix + "/add/{id}", updateUrl: prefix + "/edit/{id}", removeUrl: prefix + "/remove", exportUrl: prefix + "/export", exportByChooseUrl: prefix + "/export/choose", importUrl: prefix + "/importData", modalName: "教师", columns: [ { checkbox: true }, { field: 'id', title: '唯一id', visible: false }, { field: 'name', title: '姓名' }, { field: 'account', title: '账号(职工号)' }, { field: 'gender', title: '性别', formatter: function (value, row, index) { return $.table.selectDictLabel(genderDatas, value); }, width: 20 }, { field: 'nickName', title: '昵称' }, { field: 'email', title: '邮箱' }, // { // field: 'idNum', // title: '身份证件号', // width: 100 // }, { field: 'phone', title: '手机号', // width: 100 }, { field: 'educational', title: '学历' }, { field: 'degree', title: '学位' }, // { // field: 'birthday', // title: '生日' // }, { field: 'state', title: '账号状态', formatter: function (value, row, index) { return statusTools(row); }, width: 20 }, { field: 'collegeName', title: '所在学院' }, { field: 'lastLoginTime', title: '最后一次登录时间' }, { title: '操作', align: 'center', formatter: function (value, row, index) { var actions = []; var more = []; more.push("<a id='editBtn' rowid='" + row.id + "' class='btn btn-success btn-xs " + editFlag + "' href='javascript:void(0)' onclick='power(this)'><i class='fa fa-edit'></i>权限</a> "); more.push("<a id='editBtn' rowid='" + row.id + "' class='btn btn-success btn-xs " + editFlag + "' href='javascript:void(0)' onclick='edit(this)'><i class='fa fa-edit'></i>编辑</a> "); more.push("<a id='resetPasswordBtn' rowid='" + row.id + "' class='btn btn-success btn-xs" + editFlag + "' href='javascript:void(0)' onclick='resetPassword(this)'><i class='fa fa-edit'></i>重置密码</a> "); more.push("<a id='removeBtn' rowid='" + row.id + "' class='btn btn-danger btn-xs " + editFlag + "' href='javascript:void(0)' onclick='remove(this)'><i class='fa fa-edit'></i>删除</a> "); actions.push('<a id="' + 'operation' + row.id + '" rowid="' + row.id + '" rowname="' + row.name + '" rowaccount="' + row.account + '" tabindex="0" class="btn btn-info btn-xs" role="button" data-container="body" data-placement="left" data-toggle="popover" data-html="true" data-trigger="hover" data-content="' + more.join('') + '"><i class="fa fa-chevron-circle-right"></i>更多操作</a>'); return actions.join(''); }, width: 20 }] }; $.table.init(options); } /* 账号状态显示 */ function statusTools(row) { if (row.state == 0) { // 禁用 return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.id + '\')"></i> '; } else { // 启用 return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.id + '\')"></i> '; } } /* 账号状态-停用 */ function disable(id) { $.modal.confirm("确认要禁用账号吗？", function () { $.operate.post(prefix + "/changeState", {"id": id, "state": 0}); }) } /* 账号状态-启用 */ function enable(id) { $.modal.confirm("确认要启用账号吗？", function () { $.operate.post(prefix + "/changeState", {"id": id, "state": 1}); }) } /** * 组织树 */ function queryOrganizationTree() { var url = ctx + "system/organization/collegeTreeData"; var options = { url: url, expandLevel: 3, onClick: zOnClick }; $.tree.init(options); function zOnClick(event, treeId, treeNode) { if (treeNode.level == 0) { $("#addBtn").addClass("disabled"); $("#importBtn").addClass("disabled"); } else { $("#addBtn").removeClass("disabled"); $("#importBtn").removeClass("disabled"); } var treeObj = $.fn.zTree.getZTreeObj("tree"); var levelChildren = getLastLevelChildren(treeObj, treeNode); if (levelChildren.length > 0) { var collegeId = levelChildren[0].id; switch (treeNode.level) { case 0: $("#schoolId").val(null); $("#collegeId").val(null); break; case 1: $("#schoolId").val(treeNode.id); $("#collegeId").val(collegeId); break; case 2: $("#schoolId").val(null); $("#collegeId").val(treeNode.id); break; } }else { switch (treeNode.level) { case 0, 1: $.modal.alert("此大学下面还没有学院，不能添加教师") break; } } $.table.search(); } } function getLastLevelChildren(treeObj, node) { var level4Nodes = []; function findLevel4Children(currentNode, currentLevel) { if (currentLevel == 2) { level4Nodes = level4Nodes.concat(currentNode || []); } else if (currentNode.children) { currentNode.children.forEach(function (childNode) { findLevel4Children(childNode, currentLevel + 1); }); } } findLevel4Children(node, node.level); return level4Nodes; } $('#btnExpand').click(function () { $._tree.expandAll(true); $(this).hide(); $('#btnCollapse').show(); }); $('#btnCollapse').click(function () { $._tree.expandAll(false); $(this).hide(); $('#btnExpand').show(); }); $('#btnRefresh').click(function () { queryOrganizationTree(); }); /** * 重置密码 */ function resetPassword(btn) { $.modal.confirm("确定重置密码吗?", function () { $.modal.disable(); var url = prefix + "/resetPassword/" + $(btn).attr("rowid"); var data = {"id": $(btn).attr("rowid")}; var config = { url: url, type: "get", dataType: "json", data: "", beforeSend: function () { $.modal.loading("正在处理中，请稍候..."); }, success: function (data) { if (data.code == 0) { // 成功 $.modal.closeLoading(); $.modal.alert("密码已重置为：" + $("#operation" + $(btn).attr("rowid")).attr("rowaccount") + "@tea"); $.modal.disable(); } else { // 失败 $.modal.closeLoading(); $.modal.msgError(data.msg); $.modal.disable(); } } }; $.ajax(config) }); } /** * 删除 */ function remove(btn) { $.operate.remove($(btn).attr("rowid")); // $.table.search(); } /** * 编辑 */ function edit(btn) { $.operate.edit($(btn).attr("rowid")); } function power(btn) { let teacherId = $(btn).attr("rowid") let url = prefix + "/power/" + teacherId; $.modal.open("修改教师权限", url, '800', '400'); } /** * 回车查询 */ $("#selectConditionOneInput").keydown(function (e) { if (e.keyCode == 13) { $.table.search(); } }); $("#selectConditionTwoInput").keydown(function (e) { if (e.keyCode == 13) { $.table.search(); } }); /** * 文件上传 */ function importExcel(){ top.layer.open({ type: 1, area: [400 + 'px', 230 + 'px'], fix: false, //不固定 maxmin: true, shade: 0.3, title: '导入' + table.options.modalName + '数据', content: '<form enctype="multipart/form-data" class="mt20 mb10">\n' + ' <div class="col-xs-offset-1">\n' + ' <input type="file" id="file" name="file"/>\n' + ' <input class="hidden" type="text" id="importCollegeId" name="collegeId"/>\n' + ' <font color="red" class="pull-left mt10">\n' + ' 提示：仅允许导入“xls”或“xlsx”格式文件！\n' + ' </font>\n' + ' </div>\n' + ' </form>', btn: ['<i class="fa fa-check"></i> 导入', '<i class="fa fa-remove"></i> 取消'], // 弹层外区域关闭 shadeClose: true, btn1: function(index, layero){ var file = layero.find('#file').val(); layero.find('#importCollegeId').val($("#collegeId").val()); if (file == '' || (!$.common.endWith(file, '.xls') && !$.common.endWith(file, '.xlsx'))){ $.modal.msgWarning("请选择后缀为 “xls”或“xlsx”的文件。"); return false; } var index = top.layer.load(2, {shade: false}); $.modal.disable(); var formData = new FormData(layero.find('form')[0]); $.ajax({ url: table.options.importUrl, data: formData, cache: false, contentType: false, processData: false, type: 'POST', success: function (result) { if (result.code == web_status.SUCCESS) { $.modal.close(index); $.modal.closeAll(); $.modal.alertSuccess(result.msg); $.table.refresh(); } else if (result.code == web_status.WARNING) { $.modal.close(index); $.modal.enable(); $.modal.alertWarning(result.msg) } else { $.modal.close(index); $.modal.enable(); $.modal.alertError(result.msg); } }, complete: function () { layero.find('#file').val(''); } }); } }); } // 批量更新密码 function batchUpdatePwd() { var rows = $.table.selectColumns("id"); if (rows.length === 0) { $.modal.alertWarning("请选择用户"); return; } console.log(rows) //var initPwd = [[${@config.getKey('sys.user.initPassword')}]] layer.prompt({ formType: 0, title: '请输入重置密码', placeholder: '请输入重置密码', maxlength: 16, move: false, value: null //area: ['800px', '350px'] //自定义文本域宽高 }, function(value, index, elem){ if (value.length < 2){ $.modal.msgError("请输入正确格式的密码") return } $.modal.confirm("确认重置选中的"+ rows.length +"位教师密码?", function() { $.ajax({ type: 'patch', url: ctx + "system/teacher/resetPassword", dataType: 'json', data:{ ids:rows.join(), pwd: value }, success: function (result) { if (result.code === web_status.SUCCESS) { $.modal.msgSuccess("重置成功"); } else { $.modal.msgError("重置失败"); } }, error: function () { $.modal.msgError("重置失败"); } }); }); layer.close(index); }); } </script> </body> </html> 用vue语言重写这个页面，保持原有的功能和逻辑不变，不要使用jquery语法
07-10
下面是使用 **Vue 3 + Composition API**（无 jQuery）重写该页面的完整实现。我们将完全摒弃 jQuery，采用 Vue 的响应式系统、Axios 发送请求，并使用 **Element Plus UI 组件库** 来构建界面。 --- ## ✅ Vue 3 ...
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <th:block th:include="include :: header('教师管理列表')"/> <th:block th:include="include :: layout-latest-css"/> <th:block th:include="include :: ztree-css"/> </head> <body class="gray-bg"> <div class="ui-layout-west"> <div class="box box-main"> <div class="box-header"> <div class="box-title"> <i class="fa icon-grid"></i> 组织机构 </div> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button> <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button> <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button> </div> </div> <div class="ui-layout-content"> <div id="tree" class="ztree"></div> </div> </div> </div> <div class="ui-layout-center"> <div class="container-div"> <div class="row"> <div class="col-sm-12 search-collapse"> <form id="formId"> <div class="select-list"> <input type="hidden" id="schoolId" name="schoolId"> <input type="hidden" id="collegeId" name="collegeId"> <ul> <li> <input id="selectConditionOneInput" type="text" name="multipleOne" style="width: 200px;" placeholder="姓名|工号(账号)"/> </li> <li> <input id="selectConditionTwoInput" type="text" name="multipleTwo" style="width: 250px;" placeholder="邮箱|手机号|身份证|昵称"/> </li> <li> <label>账号：</label> <select style="width: 60px" name="state" th:with="type=${@dict.getType('accountStatus')}"> <option value="">所有</option> <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option> </select> </li> <li> <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a> <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a> </li> </ul> </div> </form> </div> <div class="btn-group-sm" id="toolbar" role="group"> <a class="btn btn-success disabled" id="addBtn" onclick="$.operate.add($('#collegeId').val())" shiro:hasPermission="system:teacher:add"> <i class="fa fa-plus"></i> 新增 </a> <a class="btn btn-danger multiple disabled" onclick="javascript:batchUpdatePwd()" shiro:hasPermission="system:teacher:batchUpdatePwd"> <i class="fa fa-sign-out"></i> 批量重置密码 </a> <a id="importBtn" class="btn btn-info disabled" onclick="importExcel()" shiro:hasPermission="system:student:export"> <i class="fa fa-upload"></i> 导入 </a> <!-- <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:teacher:export">--> <!-- <i class="fa fa-download"></i> 导出--> <!-- </a>--> <a class="btn btn-warning" onclick="$.table.exportExcelByChoose()" shiro:hasPermission="system:teacher:export"> <i class="fa fa-upload"></i> 导出 </a> <a href="/teacherTemplate.xlsx">点击下载导入模版</a> </div> <div class="col-sm-12 select-table table-striped"> <table id="bootstrap-table"></table> </div> </div> </div> </div> <th:block th:include="include :: footer"/> <th:block th:include="include :: layout-latest-js"/> <th:block th:include="include :: ztree-js"/> <script th:inline="javascript"> var editFlag = [[${@permission.hasPermi('system:teacher:edit')}]]; var removeFlag = [[${@permission.hasPermi('system:teacher:remove')}]]; var genderDatas = [[${@dict.getType('sys_user_sex')}]]; var stateDatas = [[${@dict.getType('accountStatus')}]]; var prefix = ctx + "system/teacher"; $(function () { var panehHidden = false; if ($(this).width() < 769) { panehHidden = true; } $('body').layout({initClosed: panehHidden, west__size: 185}); // 回到顶部绑定 if ($.fn.toTop !== undefined) { var opt = { win: $('.ui-layout-center'), doc: $('.ui-layout-center') }; $('#scroll-up').toTop(opt); } queryTeacherList(); queryOrganizationTree(); }); function queryTeacherList() { var options = { url: prefix + "/list", createUrl: prefix + "/add/{id}", updateUrl: prefix + "/edit/{id}", removeUrl: prefix + "/remove", exportUrl: prefix + "/export", exportByChooseUrl: prefix + "/export/choose", importUrl: prefix + "/importData", modalName: "教师", columns: [ { checkbox: true }, { field: 'id', title: '唯一id', visible: false }, { field: 'name', title: '姓名' }, { field: 'account', title: '账号(职工号)' }, { field: 'gender', title: '性别', formatter: function (value, row, index) { return $.table.selectDictLabel(genderDatas, value); }, width: 20 }, { field: 'nickName', title: '昵称' }, { field: 'email', title: '邮箱' }, // { // field: 'idNum', // title: '身份证件号', // width: 100 // }, { field: 'phone', title: '手机号', // width: 100 }, { field: 'educational', title: '学历' }, { field: 'degree', title: '学位' }, // { // field: 'birthday', // title: '生日' // }, { field: 'state', title: '账号状态', formatter: function (value, row, index) { return statusTools(row); }, width: 20 }, { field: 'collegeName', title: '所在学院' }, { field: 'lastLoginTime', title: '最后一次登录时间' }, { title: '操作', align: 'center', formatter: function (value, row, index) { var actions = []; var more = []; more.push("<a id='editBtn' rowid='" + row.id + "' class='btn btn-success btn-xs " + editFlag + "' href='javascript:void(0)' onclick='power(this)'><i class='fa fa-edit'></i>权限</a> "); more.push("<a id='editBtn' rowid='" + row.id + "' class='btn btn-success btn-xs " + editFlag + "' href='javascript:void(0)' onclick='edit(this)'><i class='fa fa-edit'></i>编辑</a> "); more.push("<a id='resetPasswordBtn' rowid='" + row.id + "' class='btn btn-success btn-xs" + editFlag + "' href='javascript:void(0)' onclick='resetPassword(this)'><i class='fa fa-edit'></i>重置密码</a> "); more.push("<a id='removeBtn' rowid='" + row.id + "' class='btn btn-danger btn-xs " + editFlag + "' href='javascript:void(0)' onclick='remove(this)'><i class='fa fa-edit'></i>删除</a> "); actions.push('<a id="' + 'operation' + row.id + '" rowid="' + row.id + '" rowname="' + row.name + '" rowaccount="' + row.account + '" tabindex="0" class="btn btn-info btn-xs" role="button" data-container="body" data-placement="left" data-toggle="popover" data-html="true" data-trigger="hover" data-content="' + more.join('') + '"><i class="fa fa-chevron-circle-right"></i>更多操作</a>'); return actions.join(''); }, width: 20 }] }; $.table.init(options); } /* 账号状态显示 */ function statusTools(row) { if (row.state == 0) { // 禁用 return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.id + '\')"></i> '; } else { // 启用 return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.id + '\')"></i> '; } } /* 账号状态-停用 */ function disable(id) { $.modal.confirm("确认要禁用账号吗？", function () { $.operate.post(prefix + "/changeState", {"id": id, "state": 0}); }) } /* 账号状态-启用 */ function enable(id) { $.modal.confirm("确认要启用账号吗？", function () { $.operate.post(prefix + "/changeState", {"id": id, "state": 1}); }) } /** * 组织树 */ function queryOrganizationTree() { var url = ctx + "system/organization/collegeTreeData"; var options = { url: url, expandLevel: 3, onClick: zOnClick }; $.tree.init(options); function zOnClick(event, treeId, treeNode) { if (treeNode.level == 0) { $("#addBtn").addClass("disabled"); $("#importBtn").addClass("disabled"); } else { $("#addBtn").removeClass("disabled"); $("#importBtn").removeClass("disabled"); } var treeObj = $.fn.zTree.getZTreeObj("tree"); var levelChildren = getLastLevelChildren(treeObj, treeNode); if (levelChildren.length > 0) { var collegeId = levelChildren[0].id; switch (treeNode.level) { case 0: $("#schoolId").val(null); $("#collegeId").val(null); break; case 1: $("#schoolId").val(treeNode.id); $("#collegeId").val(collegeId); break; case 2: $("#schoolId").val(null); $("#collegeId").val(treeNode.id); break; } }else { switch (treeNode.level) { case 0, 1: $.modal.alert("此大学下面还没有学院，不能添加教师") break; } } $.table.search(); } } function getLastLevelChildren(treeObj, node) { var level4Nodes = []; function findLevel4Children(currentNode, currentLevel) { if (currentLevel == 2) { level4Nodes = level4Nodes.concat(currentNode || []); } else if (currentNode.children) { currentNode.children.forEach(function (childNode) { findLevel4Children(childNode, currentLevel + 1); }); } } findLevel4Children(node, node.level); return level4Nodes; } $('#btnExpand').click(function () { $._tree.expandAll(true); $(this).hide(); $('#btnCollapse').show(); }); $('#btnCollapse').click(function () { $._tree.expandAll(false); $(this).hide(); $('#btnExpand').show(); }); $('#btnRefresh').click(function () { queryOrganizationTree(); }); /** * 重置密码 */ function resetPassword(btn) { $.modal.confirm("确定重置密码吗?", function () { $.modal.disable(); var url = prefix + "/resetPassword/" + $(btn).attr("rowid"); var data = {"id": $(btn).attr("rowid")}; var config = { url: url, type: "get", dataType: "json", data: "", beforeSend: function () { $.modal.loading("正在处理中，请稍候..."); }, success: function (data) { if (data.code == 0) { // 成功 $.modal.closeLoading(); $.modal.alert("密码已重置为：" + $("#operation" + $(btn).attr("rowid")).attr("rowaccount") + "@tea"); $.modal.disable(); } else { // 失败 $.modal.closeLoading(); $.modal.msgError(data.msg); $.modal.disable(); } } }; $.ajax(config) }); } /** * 删除 */ function remove(btn) { $.operate.remove($(btn).attr("rowid")); // $.table.search(); } /** * 编辑 */ function edit(btn) { $.operate.edit($(btn).attr("rowid")); } function power(btn) { let teacherId = $(btn).attr("rowid") let url = prefix + "/power/" + teacherId; $.modal.open("修改教师权限", url, '800', '400'); } /** * 回车查询 */ $("#selectConditionOneInput").keydown(function (e) { if (e.keyCode == 13) { $.table.search(); } }); $("#selectConditionTwoInput").keydown(function (e) { if (e.keyCode == 13) { $.table.search(); } }); /** * 文件上传 */ function importExcel(){ top.layer.open({ type: 1, area: [400 + 'px', 230 + 'px'], fix: false, //不固定 maxmin: true, shade: 0.3, title: '导入' + table.options.modalName + '数据', content: '<form enctype="multipart/form-data" class="mt20 mb10">\n' + ' <div class="col-xs-offset-1">\n' + ' <input type="file" id="file" name="file"/>\n' + ' <input class="hidden" type="text" id="importCollegeId" name="collegeId"/>\n' + ' <font color="red" class="pull-left mt10">\n' + ' 提示：仅允许导入“xls”或“xlsx”格式文件！\n' + ' </font>\n' + ' </div>\n' + ' </form>', btn: ['<i class="fa fa-check"></i> 导入', '<i class="fa fa-remove"></i> 取消'], // 弹层外区域关闭 shadeClose: true, btn1: function(index, layero){ var file = layero.find('#file').val(); layero.find('#importCollegeId').val($("#collegeId").val()); if (file == '' || (!$.common.endWith(file, '.xls') && !$.common.endWith(file, '.xlsx'))){ $.modal.msgWarning("请选择后缀为 “xls”或“xlsx”的文件。"); return false; } var index = top.layer.load(2, {shade: false}); $.modal.disable(); var formData = new FormData(layero.find('form')[0]); $.ajax({ url: table.options.importUrl, data: formData, cache: false, contentType: false, processData: false, type: 'POST', success: function (result) { if (result.code == web_status.SUCCESS) { $.modal.close(index); $.modal.closeAll(); $.modal.alertSuccess(result.msg); $.table.refresh(); } else if (result.code == web_status.WARNING) { $.modal.close(index); $.modal.enable(); $.modal.alertWarning(result.msg) } else { $.modal.close(index); $.modal.enable(); $.modal.alertError(result.msg); } }, complete: function () { layero.find('#file').val(''); } }); } }); } // 批量更新密码 function batchUpdatePwd() { var rows = $.table.selectColumns("id"); if (rows.length === 0) { $.modal.alertWarning("请选择用户"); return; } console.log(rows) //var initPwd = [[${@config.getKey('sys.user.initPassword')}]] layer.prompt({ formType: 0, title: '请输入重置密码', placeholder: '请输入重置密码', maxlength: 16, move: false, value: null //area: ['800px', '350px'] //自定义文本域宽高 }, function(value, index, elem){ if (value.length < 2){ $.modal.msgError("请输入正确格式的密码") return } $.modal.confirm("确认重置选中的"+ rows.length +"位教师密码?", function() { $.ajax({ type: 'patch', url: ctx + "system/teacher/resetPassword", dataType: 'json', data:{ ids:rows.join(), pwd: value }, success: function (result) { if (result.code === web_status.SUCCESS) { $.modal.msgSuccess("重置成功"); } else { $.modal.msgError("重置失败"); } }, error: function () { $.modal.msgError("重置失败"); } }); }); layer.close(index); }); } </script> </body> </html> 用vue语言重写这个页面，保持原有的功能和逻辑不变
07-10
<el-button size="mini" type="danger" @click="remove(row)">删除 layout="prev, pager, next" :total="total" :page-size="queryParams.pageSize" v-model:current-page="queryParams.pageNum" @...
jQuery点击事件拼接传参
七七的博客
03-07 756
jQuery点击事件拼接传参
前端-常用点击事件获取元素的方式及onclick如何获取点击事件所在的元素
weixin_58443158的博客
08-07 3676
事件处理器来获取触发事件的元素。事件处理器会被传入一个事件对象（），该对象包含关于事件的所有信息，包括触发事件的元素。3、事件的处理程序：事件触发后要执行的代码（函数）事件公式：事件源.事件类型 = 事件的处理程序。在JavaScript中，可以通过给元素添加。获取到是哪个元素触发了事件。1、事件源：被触发的元素。当按钮被点击时，会触发。详看示例代码，如何在。
qtreewidget 获取根节点_javascript：什么是Dom节点？
weixin_39633493的博客
12-05 505
大家好，我是专注前端开发，Web前端，可爱又迷人的前端小姐姐，本期为大家带来的前端入门新知识是”javascript：什么是Dom节点？“，有兴趣做前端开发的朋友，和我一起来看看吧！本节主要内容：什么是DOM?Document对象Dom节点分类Document节点属性获取页面元素节点创建页面元素操作页面元素属性学习目标：一、什么是DOM? DOM Document Object Mod...
微信小程序列表点击传参跑坑
m0_47406868的博客
06-12 883
微信小程序点击传参跑坑：列表渲染点击单项传递参数，通过data-xxx传递参数时发现最后打印出来undefined，尝试过修改merchantId为id，并没有效果，最后发现是data-xxx传递参数的问题 这里的data-xxx传递的应该是对象里每一项的id，实际上传的并不是。 <view wx:for-items="{{SpareArray}}" data-id="{{id}}" wx:key="id" bindtap="select" > </view&g..
jquery绑定事件并传参例如click
charsBing的博客
05-25 3720
jquery时间绑定的同时传递参数，例如click
vue中传值的方法
czw2ly的博客
12-05 3415
主要是谈谈vue中组件传值的方法，供大家参考
jquery click事件传参
热门推荐
淘淘小窝
11-03 3万+
click()函数用于为每个匹配元素的click事件绑定处理函数。该函数也可用于触发click事件。 click事件就是鼠标按钮单击事件。此外，你还可以额外传递给事件处理函数一些数据。 此外，你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发click事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。 要删除通过click()绑定的事件，请使用unb
vue @click函数传参,函数内参数打印undefined
weixin_44896595的博客
11-25 1516
这个问题真的气得我大脑发热 在方法参数前面加上一个空字符串，原因不知道！反正能取到参数了！
微信小程序事件传参的坑
weixin_42657666的博客
02-22 1527
在vue中,对绑定的事件传递参数非常简单 &lt;x-button type="primary" @click.native="changPhone(num)"&gt;确认修改绑定手机&lt;/x-button&gt; changPhone(num) {console.log(num)} 但是在小程序中 &lt;view class="filter-tags" bindt...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值