layui数据表格的数据导入

毕业设计的后台的PC端管理界面是用layui框架搭的,在其中的内联框架中包含了一些数据表格,开始完全不懂该怎么导入数据,后来问了老师,老师跟我讲了才知道。我的毕业设计是用php做的后台,下面就是导入的方式:

框架:layui

环境:win10 + sublime + wampserver

下图是layui的数据表格形式:

首先调处开发者工具,并过滤不需要的信息,查看数据传输格式:

选择上图下面的红色箭头指的文件,就可以查看数据传送到layui框架的数据格式了。

可以看到数据在传送过去的时候加了code、msg、count三个字段,那么在把数据转化为json格式之后还要添加这三个字段layui的这个数据表格框架才会接受我们传输的数据。

下面是我的php代码:

<?php
	header("Content-type:text/html;charset=utf-8");

	$conn = mysql_connect("localhost","root","");

	mysql_select_db("test", $conn);

	mysql_query("SET NAMES utf8");

	$sql = "select * from athlete";
	$count = "select * from athlete";

	$check_quary = mysql_query($sql);
	$result = mysql_query($count);

	$num = mysql_num_rows($result);

	$jarr = array();

	while($rows=mysql_fetch_assoc($check_quary)){
	    $count=count($rows);//不能在循环语句中,由于每次删除 row数组长度都减小  
	    for($i=0;$i<$count;$i++){  
	        unset($rows[$i]);//删除冗余数据  
    	}
    	array_push($jarr,$rows);
	}
	$jobj = new stdclass();
	foreach($jarr as $key => $value) {
		$jobj->$key = $value;
	}

	// print_r($jobj);

	$json = json_encode($jobj);

	$temp=array();
	
	$temp['code']=0;
	$temp['msg']='';
	$temp['count']= $num;
	$temp['data']=$jobj;

	$fina = json_encode($temp);
	echo $fina;
	return $fina;
?>

 其中$jobj就是从数据库中查出来的数据并转化为json格式,最后赋给$temp的data,在$temp添加layui要求的三个字段之后就可以传输到layui并且显示出来了。

下面是数据库和显示的实例:

这是athlete的数据表

经过php查询以及格式转化后传送到layui的数据表格框架显示为

以上就是关于数据传输到layui数据表格的内容 

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
form表单元素包括:text 文本输入框,password密码输入框,checkbox复选框,radio单选框,file 文件域,submit表单提交action指向的文件,reset表单清空,image图片提交按钮,button按钮,hidden隐藏域。 select option select 实现下拉选 callback 是回调函数 layui.模块   模块可以是layui已经存在的模块,也可以通过layui.define([mods], callback) 来自己自定义模块。 如果想要使用模块首先要做的必然是加载模块,layui.use(['laypage', 'layedit'], function(){}); 接下来使用layui风格控件  其实感觉layui帮我们定义好了CSS和许多JS文本,我们需要做的只是按照layui的命名规范选好样式进而使用就可以了。  layu官方文档的命名规范为: CSS命名规范 class命名前缀:layui,连接符:-,如:class="layui-form" 命名格式一般分为两种: 一:layui-模块名-状态或类型 二:layui-状态或类型 因为有些类并非是某个模块所特有,他们通常会是一些公共类。如: 一(定义按钮的原始风格):class="layui-btnlayui-btn-primary" 二(定义内联块状元素):class="layui-inline" 1 2 3 4 5 6 7 8 9 当然还有前面提到的使用模块的js代码: layui.use(['form', 'layedit', 'laydate'], function(){   var form = layui.form   ,layer = layui.layer   ,layedit = layui.layedit   ,laydate = layui.laydate;   //日期   laydate.render({     elem: '#date'   });   laydate.render({     elem: '#date1'   });   //创建一个编辑器   var editIndex = layedit.build('LAY_demo_editor');   //自定义验证规则   form.verify({     title: function(value){       if(value.length < 5){         return '标题至少得5个字符啊';       }     }     ,pass: [/(.+){6,12}$/, '密码必须6到12位']     ,content: function(value){       layedit.sync(editIndex);     }   });   //监听指定开关   form.on('switch(switchTest)', function(data){     layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {       offset: '6px'     });     layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)   });   //监听提交   form.on('submit(demo1)', function(data){     layer.alert(JSON.stringify(data.field), {       title: '最终的提交信息'     })     return false;   }); }); 下面我们按照官方文档的开发规范使用一下form表单的例子       表单集合演示           单行输入框                       验证必填项                             验证手机                                   验证邮箱                                       多规则验证                                   验证日期                                   验证链接                                 验证身份证                       自定义验证                   请填写6到12位密码               范围                           -                                 单行选择框                   </opt
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值