首页 > 其他分享 >基于jeesite如何实现多tab页切换时,对应Form表单进行刷新?

基于jeesite如何实现多tab页切换时,对应Form表单进行刷新?

时间:2023-05-14 18:12:29浏览次数:37  
标签:function Form text jeesite actions tab parameter data click

思路:点击tab切换时,触发form表单的submit请求,从而实现刷新效果
1、给tab加id:
<li class="active"><a href="#tab-1" id="prepareTab" data-toggle="tab">待办事项</a></li>
2、增加一个查询按钮,发送submit请求,可以隐藏
<button type="submit" id="searchFormSubmit" class="btn btn-primary btn-sm hide">${text('查询')}</button>
3、jquery根据id触发事件:
   $('#prepareTab').click(function () {
$('#searchFormSubmit').click();
})
4、整体页面例子如下:
<% layout('/layouts/default.html', {title: 'xxx', libs: ['dataGrid']}){ %>
<div class="main-content">
<div class="box box-main">
<div class="box-header">
<div class="box-title">
<i class="fa icon-pencil"></i> ${text('xxx')}
</div>
</div>
<div class="box-body pt0 page-frame">
<div class="tabpanel_move_content">
<ul class="tabpanel_mover ui-sortable">
<li class="active"><a href="#tab-1" id="prepareTab" data-toggle="tab">待办事项</a></li>
<li><a href="#tab-2" id="finishTab" data-toggle="tab">已办事项</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab-1">
<div class="table-form">
<#form:form id="searchForm" model="${xx}" action="${ctx}" method="post"
class="form-inline hide" data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
<div class="form-group">
<button type="submit" id="searchFormSubmit" class="btn btn-primary btn-sm hide">${text('查询')}</button>
</div>
</#form:form>
<table id="dataGrid"></table>
<div id="dataGridPage"></div>
</div>
</div>
<div class="tab-pane" id="tab-2">
<div class="table-form">
<#form:form id="searchForm2" model="${processingDrawingTask}" action="${ctx}" method="post"
class="form-inline hide" data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
<div class="form-group">
<button type="submit" id="searchForm2Submit" class="btn btn-primary btn-sm hide">${text('查询')}</button>
</div>
</#form:form>
<table id="dataGrid2"></table>
<div id="dataGrid2Page"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<% } %>
<script>
// 初始化DataGrid对象 -- 待办事项
$('#dataGrid').dataGrid({
searchForm: $("#searchForm"),
dataGridPage: $('#dataGridPage'),
autoGridWidth: function(){
return $('.main-content').width() - 30;
},
// 设置数据表格列
columnModel: [
{header:'${text("xx编号")}', name:'xxCode', index:'a.xx_code', width:100, align:"center"},
{header:'${text("操作")}', name:'actions', width:150, align:"center", formatter: function(val, obj, row, act){
var actions = [];
//<% if(hasPermi('tianqi:task:processingDrawingTask:edit')){ %>
actions.push('<a href="${ctx}/xxx?xxx='+row.xxx+'" class="btnList" title="${text("xx")}"><i class="fa fa-pencil"></i><span class="actions-text">xx</span></a>');
//<% } %>
return actions.join('');
}}
],
shrinkToFit: true,
// 加载成功后执行事件
ajaxSuccess: function(data){

}
});

$('#prepareTab').click(function () {
$('#searchFormSubmit').click();
})
$('#finishTab').click(function () {
$('#searchForm2Submit').click();
})
</script>

标签:function,Form,text,jeesite,actions,tab,parameter,data,click
From: https://www.cnblogs.com/dongfangzhaoyue/p/17399794.html

相关文章

  • crontab设置定时任务脚本文件每秒运行一次,每个月最后一天的21点到22点 每20分钟(1200秒
    每秒运行一次#!/bin/bashstep=2for((i=0;i<60;i=(i+step)));dophp/home/www/tp6/thinkzhangsleep$stepdoneexit0每个月最后一天的21点到22点20分钟(1200)执行一次#!/bin/bashtoday=`date+%d`hour=`date+%H`last_day=`cal|xargs|awk'{print$NF}'`if["$to......
  • SQLiteTableTool
    //提供了一些关于表操作的快捷方法(不是必要组件),当然,SQLiteStudio之类的强大且专业的工具软件也是不可或缺的//使用提示:通过在一个脚本的字段上添加[SerializeToTableCol]特性可以直接读取到TableTool的列表里,然后可以根据这个列表创建表(当然也可以手动填写这个表再创建)using......
  • Salesforce LWC学习(四十四) Datatable 显示日期类型的有趣点思考
    本篇参考:https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_salesforce_modules背景:项目中经常用到datatable显示日期类型字段,并要求日期类型字段基于指定格式显示。这种是一个很常见的需求,而且demo很容易找到,无论是官方文档中还是......
  • C# Winform 界面操作异步回调 AsyncCallback
    usingSystem;usingSystem.Collections.Generic;usingSystem.Threading;usingSystem.Windows.Forms;namespaceWindowsFormsApp1{publicpartialclassForm1:Form{publicForm1(){InitializeComponent();m......
  • python {} format
    用来按照你的需求格式化输出各种字符,比如"{:#06x}".format(i)。首先,我们需要知道,都是"{}".format()格式,大括号中的内容就是指定格式化的样式,以:开头。常见的有:标志意义:<左对齐:>右对齐:^居中:=把标志放到左边,后面可以跟数字,表示中间空多少位置:+在数......
  • 多次重新初始化hadoop namenode -format后,DataNode或NameNode没有启动
    多次重新初始化hadoopnamenode-format后,DataNode或NameNode没有启动在搭建完hadoop集群后,需要对主节点进行初始化(格式化)其本质是清理和做一些准备工作,因为此时的HDFS在物理上还是存在的。而且主节点格式化操作只能进行一次。当我们不小心多次初始化,会导致启动hadoop集群时,主......
  • Ubuntu系统下python模块graphviz运行报错:graphviz.backend.execute.ExecutableNotFoun
    代码中需要运行python模块graphviz,安装:pipinstallgraphviz 运行后报错:graphviz.backend.execute.ExecutableNotFound:failedtoexecutePosixPath('dot'),makesuretheGraphvizexecutablesareonyoursystems'PATH  报错的全部信息:Traceback(mostrecentc......
  • PostgreSQL插件(1): pg_timeout及pg_timetable 及 若干FAQ(1)
           PostgreSQL插件(1):pg_timeout及pg_timetable及若干FAQ(1)PostgreSQL2023-05-1209:20发表于河北编者荐语:报考PG数据库专家上盘古云课堂以下文章来源于数据库杂记,作者SeanHe1、前言这次将简单介绍PG的两个插件,以及若干常见问题汇集,作......
  • wps word设置table单元格内容不换行
    wpsword设置table单元格内容不换行,文字挤在一起方法:右键表格属性》单元格》选项》勾选适应文字 ......
  • Winform 遮罩懒人处理法
    前言之前有个项目需要执行一个略微耗时的操作大概五六七八九十秒这样子,这个时候程序不能做其他操作,只能等待操作完成。为了提升一丝使用体验同时让Winform程序看上去高级一点......