layui数据表格重载实现往后台传参


Posted in Javascript onNovember 15, 2019

1、网上的代码:

<div class="demoTable"> 
搜索商户: <div class="layui-inline"> 
<input class="layui-input" name="keyword" id="demoReload" autocomplete="off"> 
</div> 
<button class="layui-btn" data-type="reload">搜索</button></div> 
 
在js加入初始化代码和定义加载方法 
layui.use('table', function(){ 
var table = layui.table; 
 
//方法级渲染 
table.render({ 
elem: '#LAY_table_user' 
,url: 'UVServlet' 
,cols: [[ 
{checkbox: true, fixed: true} 
,{field:'id', title: 'ID', width:80, sort: true, fixed: true} 
,{field:'aid', title: '商户', width:80, sort: true} 
,{field:'uv', title: '访问量', width:80, sort: true,edit:true} 
,{field:'date', title: '日期', width:180} 
,{field:'datatype', title: '日期类型', width:100} 
 
]] 
,id: 'testReload' 
,page: true 
,height: 600 
}); 
 
var $ = layui.$, active = { 
reload: function(){ 
var demoReload = $('#demoReload'); 
 
table.reload('testReload', { 
where: { 
keyword: demoReload.val() 
} 
}); 
} 
}; 
)};

绑定click点击事件

$('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); //注意顶一个括号中的格式,class用.id用#,中间有一个空格
active[type] ? active[type].call(this) : ''; 
});

此时点击查询按钮,会将keyword这个关键字传到后端,接下来就是自己处理查询关键字业务了。

到目前为止,搜索也有了,分页也有了,对了,分页会自动传到后端page,limit2个值到后台,相当于(pageindex,pagesize)

2、实践,

(1)html页面及javascript代码如下:

<!--index.html内容如下-->
{% extends 'common.html'%}
  {% block content %}
    <div class="layui-row">
				<form class="layui-form layui-col-md12 we-search" id="form_gen_data">
					<div class="layui-inline">
            <label class="layui-form-label">手机号</label>
						<input class="layui-input" placeholder="手机号" name="phone" id="phone">
					</div>
 
          <div class="layui-inline">
            <label class="layui-form-label">身份证</label>
						<input class="layui-input" placeholder="身份证" name="idno" id="idno">
					</div>
 
          <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
						<input class="layui-input" placeholder="姓名" name="name" id="name">
					</div>
 
          <div class="layui-inline">
            <label class="layui-form-label">crfuid</label>
						<input class="layui-input" placeholder="crfuid" name="crfuid" id="crfuid">
					</div>
 
				</form>
			</div>
 
			<div class="weadmin-block">
 
				<button class="layui-btn" id="query_extra" style="display:none;">扩展功能</button>
				<button class="layui-btn" id="query_thumb">开始查询</button>
				<button class="layui-btn" id="query_limit">额度查询</button>
				<button class="layui-btn" id="query_member">会员查询</button>
				<button class="layui-btn" id="query_account">账户查询</button>
 
				<button class="layui-btn" id="query_sms" οnclick="return false;" data-type="reload">短信验证码查询</button>
				<div class="layui-collapse" lay-accordion>
 
				 <div class="layui-colla-item">
					<h2 class="layui-colla-title">扩展功能</h2>
					<div class="layui-colla-content">
						{% for business in common_business %}
						<button class="layui-btn layui-btn-danger common_business" id="{{business.business_code}}" data-type="{{business.business_code}}" data-extra="{{business.business_is_extra}}">{{business.business_name}}</button>
						{% endfor %}
					</div>
				 </div>
				</div>
 
 
			</div>
			<div class="layui-collapse">
			 	<div class="layui-colla-item">
					<h2 class="layui-colla-title">日志</h2>
					<div class="layui-colla-content layui-show"><textarea placeholder="" id="log" class="layui-textarea" name="desc"></textarea></div>
 
 
				</div>
 
				<div class="layui-colla-item">
					<h2 class="layui-colla-title">附加信息</h2>
					<div class="layui-colla-content layui-show" id="extra_info">
 
					</div>
				</div>
			</div>
 
 
			<table class="layui-hide" id="table_message" lay-filter="user"></table>
 
      <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
 
			<script>
      layui.use('table', function(){
        var table = layui.table;
 
        //方法级渲染
        table.render({
          elem: '#table_message'
          ,url: '/sms/message'
          ,method:'post'
          ,where: {
                phone: '',
                env_tools:parent.window.env_tools
              }
          ,cellMinWidth: 100
          ,cols: [[
            {checkbox: true, fixed: true}
            ,{field:'id', title: 'ID', sort: true,width:120, fixed: true}
            ,{field:'phone', title: '手机号',width:120}
            ,{field:'content', title: '短信内容', sort: true}
            ,{field:'create_time', title: '发送时间',width:160}
          ]]
          ,id: 'testReload'
          ,page: true
          ,height: 500
        });
 
        var $ = layui.$, active = {
          reload: function(){
            var demoReload = $('#phone');
            $('.env_message').html('当前操作环境:'+ parent.window.env_tools);
            //执行重载
            table.reload('testReload', {
              page: {
                curr: 1 //重新从第 1 页开始
              }
              ,where: {
                phone: demoReload.val(),
                env_tools:parent.window.env_tools
              }
            });
          }
        };
 
        $('.weadmin-block #query_sms').on('click',
        function(){
          var type = $(this).data('type');
          active[type] ? active[type].call(this) : '';
        });
      });
    </script>
 
  {% endblock %}

(2)后台代码如下:

@toolsbp.route('/')
@toolsbp.route('/index',methods=['GET','POST'])
def index():
  
  if request.method=='POST':
    data={}
    data['data']=''
    data['code']=0
    data['msg']='查询成功'
    env=request.form.get('env_tools')
 
    if env is None:
      return json.dumps(data)
    phone=request.form.get('phone')
    where=''
    if phone:
      where="where phone like '%(phone)s'"%{'phone':'%'+phone+'%'}
    dbinfo=env_config.ENV_LIST.get(env.upper()).get('sms_platform')
    dbtool=MysqlPool.MysqlPool(dbinfo.get('db_name'))
    result=dbtool.getAll("select * from %(table_name)s.sms_send_record %(where)s order by create_time desc limit %(page)d,%(pagesize)d;"%{'where':where,'table_name':dbinfo.get('table_name'),'page':int(request.form.get('page'))-1,'pagesize':int(request.form.get('limit'))})
    data['data']=result
    if result:
      data['count']=len(result)
    else:
      data['count']=0
    return json.dumps(data,cls=MysqlPool.DateEncoder)
  return render_template('tools/index.html')

(3)页面功能如下:

layui数据表格重载实现往后台传参

以上这篇layui数据表格重载实现往后台传参就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery validator 插件增加日期比较方法
Feb 21 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
react中的DOM操作实现
Jun 30 Javascript
JS class语法糖的深入剖析
Jul 07 Javascript
JS实现贪吃蛇游戏
Nov 15 #Javascript
Layui表格监听行单双击事件讲解
Nov 14 #Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 #Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 #Javascript
layui写后台表格思路和赋值用法详解
Nov 14 #Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 #Javascript
layui 弹出层值回传解决方式
Nov 14 #Javascript
You might like
PHP游戏编程25个脚本代码
2011/02/08 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
javascript事件模型代码
2007/07/01 Javascript
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
JQuery球队选择实例
2015/05/18 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
python定向爬取淘宝商品价格
2018/02/27 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
Django 重写用户模型的实现
2019/07/29 Python
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
最受欢迎的自我评价
2013/12/22 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
求职信名称怎么写
2014/05/26 职场文书
绿色小区申报材料
2014/08/22 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
秋收起义观后感
2015/06/11 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android