Layui + TP 实现点击添加input表格，添加与赋值
index视图
{extend name="layout/common" /}
{block name="title"}人员管理{/block}
<!--<link href="https://kodo.79524795.vip/jquery/normalize.css" rel="stylesheet">-->
<!--<link href="https://kodo.79524795.vip/jquery/default.css" rel="stylesheet">-->
<!--<link href="https://kodo.79524795.vip/jquery/swipebox.css" rel="stylesheet">-->
<!--<script src="https://kodo.79524795.vip/jquery/ios-orientationchange-fix.js" charset="utf-8"></script>-->
<!--<script src="https://kodo.79524795.vip/jquery/jquery.min.js" charset="utf-8"></script>-->
<!--<script src="https://kodo.79524795.vip/jquery/jquery.swipebox.js" charset="utf-8"></script>-->
{block name="body"}
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
<div class="layui-form-item">
</div>
</div>
<div class="layui-card-body">
<div style="padding-bottom: 10px;">
<!-- <button class="layui-btn layuiadmin-btn-useradmin" data-type="batchdel">删除</button> -->
<button class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加</button>
<br/>
搜索课程：
<div class="layui-inline">
<input class="layui-input" name="name" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn layuiadmin-btn-useradmin" data-type="reload">搜索</button>
</div>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="status-tpl">
<img src="{{ d.feng }}" style="height:30px;" />
</script>
<script type="text/html" id="table-useradmin-webuser">
<!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="info">详细</a> -->
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
{/block}
{block name="js"}
<script src="__layuiadmin__/layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['table', 'layer','laydate'], function(){
var $ = layui.$
,laydate = layui.laydate;
//日期
laydate.render({
elem: '#demoReload4'
});
var table = layui.table;
table.render({
elem: '#demo'
,url: "{:url('Testpro/table')}"//数据接口
,page: true //开启分页
,cols: [[
{field: 'id', title: 'id', width:80, sort: true, fixed: 'left'}
,{field: 'name', title: '试卷名称',align: 'center', minWidth:100}
// ,{field: 'name', title: '名称',align: 'center', minWidth:100}
// ,{field: 'introduce', title: '介绍',align: 'center', minWidth:120}
// ,{field: 'feng', title: '封面',align: 'center', minWidth:150,templet: '#status-tpl'}
,{field: 'c_time', title: '修改时间', minWidth:170, align: 'center'}
,{ title: '操作', minWidth: 300, align: 'center', fixed: 'right', toolbar: '#table-useradmin-webuser' }
]]
});
// 事件
var active = {
add: function () {
// console.log('111');
// return;
parent.layer.open({
type: 2
, title: '添加'
, content: '{:url("add")}'
, maxmin: true
// width: 504px; height: 424px;
, area: ['1000px', '650px']
, btn: ['确定', '取消']
, yes: function (index, layero) {
var iframeWindow = parent.window['layui-layer-iframe' + index]
, submitID = 'LAY-user-front-submit'
, submit = layero.find('iframe').contents().find('#' + submitID);
//监听提交
iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
// field 表单数据
var field = data.field;
console.log(field)
// return
$.ajax({
url: '{:url("add")}',
type: 'post',
data: field,
success: res => {
console.log(res)
layer.msg(res.msg, {
time: 1500
})
if (res.code == 0) {
table.reload('demo'); //数据刷新
}
}
});
parent.layer.close(index); //关闭弹层
});
submit.trigger('click');
}
});
}
,reload: function(){
var demoReload = $('#demoReload').val();
// var demoReload2 = $('#demoReload2').val();
// var demoReload3 = $('#demoReload3').val();
// var demoReload4 = $('#demoReload4').val();
// var demoReload5 = $('#demoReload5').val();
var demoReload6 = $('#demoReload6').val();
// var demoReload7 = $('#demoReload7').val();
console.log(demoReload);
//执行重载demo
table.reload('demo', {
method: 'post'
,url: '{:url("table")}'
,where: {
'h1': demoReload,
// 'rank': demoReload2,
// 'type': demoReload3,
// 'birthday': demoReload4,
// 'linkman': demoReload5,
'tel': demoReload6,
// 'map': demoReload7,
}
});
}
};
//------------------
// 监听工具条
table.on('tool(test)', function (obj) {
var data = obj.data;
if (obj.event === 'del') {
layer.confirm('确认删除该数据吗？', function (index) {
console.log(data)
$.ajax({
url: '{:url("Testpro/del")}',
type: 'post',
data: { id: data.id },
success: res => {
layer.msg(res.msg, {
time: 1500,
});
if (res.code == 200) {
table.reload('demo'); //数据刷新
}
}
});
// parent.layer.close(index); //关闭弹层
layer.close(index);
});
}
else if (obj.event === 'edit') {
var tr = $(obj.tr);
parent.layer.open({
type: 2
, title: '编辑内容'
, content: '{:url("Testpro/edit")}' + '?id=' + data.id
, maxmin: true
, area: ['1000px', '650px']
, btn: ['确定', '取消']
, yes: function (index, layero) {
var iframeWindow = parent.window['layui-layer-iframe' + index]
, submitID = 'LAY-user-front-submit'
, submit = layero.find('iframe').contents().find('#' + submitID);
//监听提交
iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
// field 表单数据
var field = data.field;
console.log(field)
$.ajax({
url: '{:url("Testpro/edit")}',
type: 'post',
data: field,
success: res => {
console.log(res)
layer.msg(res.msg, {
time: 1500
})
if (res.code == 0) {
table.reload('demo'); //数据刷新
}
}
});
parent.layer.close(index);
});
submit.trigger('click');
}
, success: function (layero, index) {
}
});
}
});
$('.layui-btn.layuiadmin-btn-useradmin').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
{/block}
add方法：
public function add()
{
if (request()->isPost()) {
$data = input('post.');
$data = json_encode($data);//成为json
$data = json_decode($data,true);
if(!empty($data['ways']) && !empty($data['wayskey'] && !empty($data['waysfen']))){
for ($i = 0; $i < count($data['ways']); $i++) {
$ways[$i]['timu'] = $data['ways'][$i];
$ways[$i]['daan'] = $data['wayskey'][$i];
$ways[$i]['fen'] = $data['waysfen'][$i];
}
$ways = json_encode($ways,320);
}else{
$ways = '';
}
if(!empty($data['tiankong']) && !empty($data['tiankongskey'] && !empty($data['tiankongsfen']))){
for ($a = 0; $a < count($data['tiankong']); $a++) {
$tiankong[$a]['timu'] = $data['tiankong'][$a];
$tiankong[$a]['daan'] = $data['tiankongskey'][$a];
$tiankong[$a]['fen'] = $data['tiankongsfen'][$a];
}
$tiankong = json_encode($tiankong,320);
}else{
$tiankong = '';
}
if(!empty($data['panduan']) && !empty($data['panduanskey']) && !empty($data['panduansfen'])){
for ($b = 0; $b < count($data['panduan']); $b++) {
$panduan[$b]['timu'] = $data['panduan'][$b];
$panduan[$b]['daan'] = $data['panduanskey'][$b];
$panduan[$b]['fen'] = $data['panduansfen'][$b];
}
$panduan = json_encode($panduan,320);
}else{
$panduan = '';
}
if(!empty($data['jisuan']) && !empty($data['jisuanskey']) && !empty($data['jisuansfen'])){
for ($c = 0; $c < count($data['jisuan']); $c++) {
$jisuan[$c]['timu'] = $data['jisuan'][$c];
$jisuan[$c]['daan'] = $data['jisuanskey'][$c];
$jisuan[$c]['fen'] = $data['jisuansfen'][$c];
}
$jisuan = json_encode($jisuan,320);
}else{
$jisuan = '';
}
$testp = new testp;
$testp->name = $data['name'];
$testp->ways = $ways; //选择题题目
$testp->tiankong = $tiankong; //选择题题目
$testp->panduan = $panduan; //选择题题目
$testp->jisuan = $jisuan; //选择题题目
$testp->c_time = time(); //时间
$testp= $testp->save();
if ($testp == 1) {
return json(['code' => 0, 'msg' => '添加成功']);
}else{
return json(['code' => 1, 'msg' => '添加失败']);
}
} else {
return view();
}
}
add视图
{block name="head"}
<title>后台系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="__layuiadmin__/layui/css/layui.css" media="all">
{/block}
<!-- <body> 44554-->
{block name="body1"}
<div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="padding: 20px 0 0 0;">
<div class="layui-form-item" style="padding: 20px 0 0 0;">
<label class="layui-form-label layui-font-20">试卷名称</label>
<div class="layui-input-inline">
<input type="text" name="name" lay-verify="required" lay-reqtext="试卷名称是必填项！" placeholder="请输入试卷名称" autocomplete="off" class="layui-input">
</div>
</div>
<!-- +++++++++++++++选择题++++++++++++++ -->
<div class="layui-form-item" >
<label class="layui-form-label layui-font-20">选择题</label>
<div class="" id="last">
<div class="layui-input-block">
<div class="">
<input type="text" name="ways[]" lay-verify="required" lay-reqtext="题目是必填项！" placeholder="请输入题目" autocomplete="off" class="layui-input">
<input type="text" name="wayskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">
<div class="layui-input-inline">
<input type="number" name="waysfen[]" lay-verify="required" placeholder="请输入分数" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-block" style="margin-left: 370px">
<button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
</div>
</div>
<br/>
</div>
</div>
<!-- +++++++++++++++选择题END++++++++++++++ -->
<!-- +++++++++++++++填空题++++++++++++++ -->
<br/>
<br/>
<div class="layui-form-item layui-form-text" id="tiankong">
<label class="layui-form-label layui-font-20">填空题</label>
<div>
<div class="layui-input-block">
<textarea name="tiankong[]" placeholder="请输入题目" lay-verify="required" lay-reqtext="必填项！" class="layui-textarea"></textarea>
<input type="text" name="tiankongskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">
<div class="layui-input-inline">
<input type="number" name="tiankongsfen[]" lay-verify="required" placeholder="请输入分数" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-input-block" style="margin-left: 480px">
<button id="addtiankong" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
</div>
<br/>
</div>
<!--+++++++++++++++填空题END++++++++++++++ -->
<br/>
<br/>
{/block}
{block name="body2"}
<!-- <div class="layui-form-item">
<label class="layui-form-label">内容</label> -->
<div class="container ">
<!-- //此div重写父模板 -->
<div id="wrap" class="nav" value="">
</div>
<!-- <div class="time-spend"><button id="save" class="btn btn-default btn-lg">提交</button></div> -->
</div>
<!-- </div> -->
<div class="layui-form-item layui-hide">
<input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
</div>
{/block}
</div>
{block name="js"}
<script type="text/plain" style="display: none" id="md_source"></script>
{/block}
{block name="jss"}
<script src="__layuiadmin__/layui/layui.js"></script>
<script>
layui.config({
base: '__layuiadmin__/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'form', 'upload','laydate','element', 'layer'], function(){
var $ = layui.$
,form = layui.form
,upload = layui.upload
,element = layui.element
,layer = layui.layer
,laydate = layui.laydate;
//动态添加input输入框 选择题
$("#add").click(function () {
var str = '<div class="layui-input-block">'+
'<div class="">'+
'<input type="text" name="ways[]" lay-verify="required" lay-reqtext="题目是必填项！" placeholder="请输入题目" autocomplete="off" class="layui-input">'+
'<input type="text" name="wayskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">'+
'<div class="layui-input-inline">'+
'<input type="number" name="waysfen[]" lay-verify="required" lay-reqtext="分数是必填项！" placeholder="请输入分数" autocomplete="off" class="layui-input">'+
' </div>'+
'<div class="layui-input-block" style="margin-left: 370px">' +
'<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon"></i></button>' +
'</div>' +
'</div>'+
'</div>'+'<br/>';
$("#last").append(str);
// x++;
});
//删除动态添加的input输入框
$("body").on('click', ".removeclass", function () {
//元素移除前校验是否被引用
var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
var parentEle = $(this).parent().parent().parent();
parentEle.remove();
});
//动态添加 填空题
$("#addtiankong").click(function () {
var str =
'<div>'+
'<div class="layui-input-block">'+
'<textarea name="tiankong[]" placeholder="请输入题目" lay-verify="required" lay-reqtext="必填项！" class="layui-textarea"></textarea>'+
'<input type="text" name="tiankongskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">'+
'<div class="layui-input-inline">'+
'<input type="number" name="tiankongsfen[]" lay-verify="required" lay-reqtext="分数是必填项！" placeholder="请输入分数" autocomplete="off" class="layui-input">'+
'</div>'+
'</div>'+
'<div class="layui-input-block" style="margin-left: 480px">' +
'<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removetiankong"><i class="layui-icon"></i></button>' +
'</div>' +
'</div>'+'<br/>';
$("#tiankong").append(str);
// x++;
});
//删除动态添加的input输入框
$("body").on('click', ".removetiankong", function () {
//元素移除前校验是否被引用
var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
var parentEle = $(this).parent().parent();
parentEle.remove();
});
//动态添加判断题END
$("#addpanduan").click(function () {
var str = '<div class="layui-input-block">'+
'<div class="">'+
'<input type="text" name="panduan[]" lay-verify="required" lay-reqtext="题目是必填项！" placeholder="请输入题目" autocomplete="off" class="layui-input">'+
'<input type="text" name="panduanskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">'+
'<div class="layui-input-inline">'+
'<input type="number" name="panduansfen[]" lay-verify="required" lay-reqtext="分数是必填项！" placeholder="请输入分数" autocomplete="off" class="layui-input">'+
'</div>'+
'<div class="layui-input-block" style="margin-left: 370px">' +
'<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removepanduan"><i class="layui-icon"></i></button>' +
'</div>' +
'</div>'+
'</div>'+'<br/>';
$("#panduan").append(str);
// x++;
});
//删除动态添加的input输入框
$("body").on('click', ".removepanduan", function () {
//元素移除前校验是否被引用
var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
var parentEle = $(this).parent().parent().parent();
parentEle.remove();
});
//添加计算题
$("#addtjisuan").click(function () {
var str =
'<div>'+
'<div class="layui-input-block">'+
'<textarea name="jisuan[]" placeholder="请输入题目" lay-verify="required" lay-reqtext="必填项！" class="layui-textarea"></textarea>'+
'<textarea name="jisuanskey[]" placeholder="请输入答案" lay-verify="required" lay-reqtext="答案是必填项！" autocomplete="off" class="layui-textarea"></textarea>'+
'<div class="layui-input-inline">'+
'<input type="number" name="jisuansfen[]" lay-verify="required" lay-reqtext="分数是必填项！" placeholder="请输入分数" autocomplete="off" class="layui-input">'+
'</div>'+
'</div>'+
'<div class="layui-input-block" style="margin-left: 480px">' +
'<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removejisuan"><i class="layui-icon"></i></button>' +
'</div>' +
'</div>'+'<br/>';
$("#jisuan").append(str);
// x++;
});
//删除动态添加的input输入框
$("body").on('click', ".removejisuan", function () {
//元素移除前校验是否被引用
var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
var parentEle = $(this).parent().parent();
parentEle.remove();
});
//-------------------------------------------------------------------------
})
</script>
{/block}
<!-- </body> -->
<!-- </html> -->
edit方法：
public function edit()
{
if (request()->isPost() ) {
$data = input('post.');
$data = json_encode($data);//成为json
$data = json_decode($data,true);
if(!empty($data['ways']) && !empty($data['wayskey'] && !empty($data['waysfen']))){
for ($i = 0; $i < count($data['ways']); $i++) {
$ways[$i]['timu'] = $data['ways'][$i];
$ways[$i]['daan'] = $data['wayskey'][$i];
$ways[$i]['fen'] = $data['waysfen'][$i];
}
$ways = json_encode($ways,320);
}else{
$ways = '';
}
$data = [
'id' => input('post.id') ? input('post.id'):'',
'name' => input('post.name')?input('post.name'):'',
'ways' => $ways,
'tiankong' => $tiankong,
'panduan' => $panduan,
'jisuan' => $jisuan,
'c_time' => time(),
];
$da= testp::update($data);
return json(['code' => 0, 'msg' => '修改成功']);
} else {
$id = input('id', '', 'intval');
$data = testp::get($id);
$data = json_encode($data,320);
$data = json_decode($data,true);
if(!empty($data['ways'])){$ways = json_decode($data['ways'],true);}else{$ways ='';}
if(!empty($data['tiankong'])){$tiankong = json_decode($data['tiankong'],true);}else{$tiankong ='';}
if(!empty($data['panduan'])){$panduan = json_decode($data['panduan'],true);}else{$panduan ='';}
if(!empty($data['jisuan'])){$jisuan = json_decode($data['jisuan'],true);}else{$jisuan ='';}
$this->assign('id',$id);
$this->assign('name',$data['name']); //名称
$this->assign('ways',$ways); //选择题题目 答案
$this->assign('tiankong',$tiankong); //填空题题目 答案
$this->assign('panduan', $panduan); //判断题题目 答案
$this->assign('jisuan',$jisuan); //计算题题目 答案
return view();
}
}
edit视图
{block name="head"}
<title>后台系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="__layuiadmin__/layui/css/layui.css" media="all">
{/block}
<!-- <body> 44554-->
{block name="body1"}
<div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="padding: 20px 0 0 0;">
<input name="id" value="{$id}" class="layui-input" value="" type="hidden">
<div class="layui-form-item" style="padding: 20px 0 0 0;">
<label class="layui-form-label layui-font-20">试卷名称</label>
<div class="layui-input-inline">
<input value="{$name}" type="text" name="name" lay-verify="required" lay-reqtext="试卷名称是必填项！" placeholder="请输入试卷名称" class="layui-input">
</div>
</div>
<!-- +++++++++++++++选择题++++++++++++++ -->
<div class="layui-form-item" >
<label class="layui-form-label layui-font-20">选择题</label>
<div class="" id="last">
<button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
<i class="layui-icon"></i>
</button>
{volist name="ways" id="vo"}
<div class="layui-input-block">
<div class="">
<input value="{$vo.timu}" type="text" name="ways[]" lay-verify="required" lay-reqtext="题目是必填项！" placeholder="请输入题目" autocomplete="off" class="layui-input">
<input value="{$vo.daan}" type="text" name="wayskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">
<div class="layui-input-inline">
<input value="{$vo.fen}" type="number" name="waysfen[]" lay-verify="required" placeholder="请输入分数" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-block" style="margin-left: 480px">
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon"></i></button>
</div>
</div>
</div><br/>
{/volist}
</div>
</div>
<!-- +++++++++++++++选择题END++++++++++++++ -->
<!-- +++++++++++++++填空题++++++++++++++ -->
<br/>
<br/>
<div class="layui-form-item layui-form-text" id="tiankong">
<label class="layui-form-label layui-font-20">填空题</label>
<button id="addtiankong" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
<i class="layui-icon"></i>
</button>
{volist name="tiankong" id="aa"}
<div>
<div class="layui-input-block">
<textarea value="" name="tiankong[]" placeholder="请输入题目" lay-verify="required" lay-reqtext="必填项！" class="layui-textarea">{$aa.timu}</textarea>
<input value="{$aa.daan}" type="text" name="tiankongskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">
<div class="layui-input-inline">
<input value="{$aa.fen}" type="number" name="tiankongsfen[]" lay-verify="required" placeholder="请输入分数" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-input-block" style="margin-left: 480px">
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removetiankong"><i class="layui-icon"></i></button>
</div>
</div>
<br/>
{/volist}
</div>
<!--+++++++++++++++填空题END++++++++++++++ -->
<!--+++++++++++++++判断题++++++++++++++ -->
<br/>
<br/>
<div class="layui-form-item" >
<label class="layui-form-label layui-font-20">判断题</label>
<div class="" id="panduan">
<button id="addpanduan" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
<i class="layui-icon"></i>
</button>
{volist name="panduan" id="bb"}
<div class="layui-input-block">
<div class="">
<input value="{$bb.timu}" type="text" name="panduan[]" lay-verify="required" lay-reqtext="题目是必填项！" placeholder="请输入题目" autocomplete="off" class="layui-input">
<input value="{$bb.daan}" type="text" name="panduanskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">
<div class="layui-input-inline">
<input value="{$bb.fen}" type="number" name="panduansfen[]" lay-verify="required" placeholder="请输入分数" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-block" style="margin-left: 480px">
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removepanduan"><i class="layui-icon"></i></button>
</div>
</div>
</div>
<br/>
{/volist}
</div>
</div>
<!--+++++++++++++++判断题END++++++++++++++ -->
<!--+++++++++++++++计算题++++++++++++++ -->
<br/>
<br/>
<div class="layui-form-item layui-form-text" id="jisuan">
<label class="layui-form-label layui-font-20">计算题</label>
<button id="addtjisuan" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
<i class="layui-icon"></i>
</button>
{volist name="jisuan" id="cc"}
<div>
<div class="layui-input-block">
<textarea name="jisuan[]" placeholder="请输入题目" lay-verify="required" lay-reqtext="必填项！" class="layui-textarea">{$cc.timu}</textarea>
<textarea name="jisuanskey[]" placeholder="请输入答案" lay-verify="required" lay-reqtext="答案是必填项！" autocomplete="off" class="layui-textarea">{$cc.daan}</textarea>
<div class="layui-input-inline">
<input value="{$cc.fen}" type="number" name="jisuansfen[]" lay-verify="required" placeholder="请输入分数" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-input-block" style="margin-left: 480px">
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removejisuan"><i class="layui-icon"></i></button>
</div>
</div>
<br/>
{/volist}
</div>
<!--+++++++++++++++计算题END++++++++++++++ -->
<br/>
<br/>
{/block}
{block name="body2"}
<!-- <div class="layui-form-item">
<label class="layui-form-label">内容</label> -->
<div class="container ">
<!-- //此div重写父模板 -->
<div id="wrap" class="nav" value="">
</div>
<!-- <div class="time-spend"><button id="save" class="btn btn-default btn-lg">提交</button></div> -->
</div>
<!-- </div> -->
<div class="layui-form-item layui-hide">
<input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
</div>
{/block}
</div>
{block name="js"}
<script type="text/plain" style="display: none" id="md_source"></script>
{/block}
{block name="jss"}
<script src="__layuiadmin__/layui/layui.js"></script>
<script>
layui.config({
base: '__layuiadmin__/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'form', 'upload','laydate','element', 'layer'], function(){
var $ = layui.$
,form = layui.form
,upload = layui.upload
,element = layui.element
,layer = layui.layer
,laydate = layui.laydate;
//动态添加input输入框 选择题
$("#add").click(function () {
var str = '<div class="layui-input-block">'+
'<div class="">'+
'<input type="text" name="ways[]" lay-verify="required" lay-reqtext="题目是必填项！" placeholder="请输入题目" autocomplete="off" class="layui-input">'+
'<input type="text" name="wayskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">'+
'<div class="layui-input-block" style="margin-left: 480px">' +
'<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon"></i></button>' +
'</div>' +
'</div>'+
'</div>'+'<br/>';
$("#last").append(str);
// x++;
});
//删除动态添加的input输入框
$("body").on('click', ".removeclass", function () {
//元素移除前校验是否被引用
var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
var parentEle = $(this).parent().parent().parent();
parentEle.remove();
});
//动态添加 填空题
$("#addtiankong").click(function () {
var str =
'<div>'+
'<div class="layui-input-block">'+
'<textarea name="tiankong[]" placeholder="请输入题目" lay-verify="required" lay-reqtext="必填项！" class="layui-textarea"></textarea>'+
'<input type="text" name="tiankongskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">'+
'</div>'+
'<div class="layui-input-block" style="margin-left: 480px">' +
'<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removetiankong"><i class="layui-icon"></i></button>' +
'</div>' +
'</div>'+'<br/>';
$("#tiankong").append(str);
// x++;
});
//删除动态添加的input输入框
$("body").on('click', ".removetiankong", function () {
//元素移除前校验是否被引用
var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
var parentEle = $(this).parent().parent();
parentEle.remove();
});
//动态添加判断题END
$("#addpanduan").click(function () {
var str = '<div class="layui-input-block">'+
'<div class="">'+
'<input type="text" name="panduan[]" lay-verify="required" lay-reqtext="题目是必填项！" placeholder="请输入题目" autocomplete="off" class="layui-input">'+
'<input type="text" name="panduanskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">'+
'<div class="layui-input-block" style="margin-left: 480px">' +
'<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removepanduan"><i class="layui-icon"></i></button>' +
'</div>' +
'</div>'+
'</div>'+'<br/>';
$("#panduan").append(str);
// x++;
});
//删除动态添加的input输入框
$("body").on('click', ".removepanduan", function () {
//元素移除前校验是否被引用
var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
var parentEle = $(this).parent().parent().parent();
parentEle.remove();
});
//添加计算题
$("#addtjisuan").click(function () {
var str =
'<div>'+
'<div class="layui-input-block">'+
'<textarea name="jisuan[]" placeholder="请输入题目" lay-verify="required" lay-reqtext="必填项！" class="layui-textarea"></textarea>'+
'<textarea name="jisuanskey[]" placeholder="请输入答案" lay-verify="required" lay-reqtext="答案是必填项！" autocomplete="off" class="layui-textarea"></textarea>'+
'</div>'+
'<div class="layui-input-block" style="margin-left: 480px">' +
'<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removejisuan"><i class="layui-icon"></i></button>' +
'</div>' +
'</div>'+'<br/>';
$("#jisuan").append(str);
// x++;
});
//删除动态添加的input输入框
$("body").on('click', ".removejisuan", function () {
//元素移除前校验是否被引用
var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
var parentEle = $(this).parent().parent();
parentEle.remove();
});
//-------------------------------------------------------------------------
//日期
laydate.render({
elem: '#date'
});
upload.render({
elem: '#test5'
,url: '{:url("upload")}' //此处配置你自己的上传接口即可
,accept: 'video' //视频
,done: function(res){
layer.msg('上传成功');
console.log('上传成功');
console.log(res)
}
});
var navArr = [];//定义一个数组 用于存储 传过来的 上传文件的路径
//演示多文件列表
var uploadListIns = upload.render({
elem: '#testList'
,elemList: $('#demoList') //列表元素对象
,url: '{:url("upload")}' //后台上传文件接口
,accept: 'file'
,multiple: true
,number: 1
,auto: false
,bindAction: '#testListAction'
,choose: function(obj){
var that = this;
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
,'<td>'
,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
,'</td>'
,'</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
that.elemList.append(tr);
element.render('progress'); //渲染新加的进度条组件
});
}
,done: function(res, index, upload){ //成功的回调
var that = this;
//if(res.code == 0){ //上传成功
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件
var navArr = [];//定义一个数组 用于存储 传过来的 上传文件的路径
navArr.push(res.message); //返回的文件地址 存进数组
$(".filess").val(JSON.stringify(navArr));
console.log(res.message);
return;
//}
this.error(index, upload);
}
,allDone: function(obj){ //多文件上传完毕后的状态回调
console.log(obj)
}
,error: function(index, upload){ //错误回调
var that = this;
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
}
});
upload.render({
elem: '#layuiadmin-upload-useradmin'
,url: layui.setter.base + 'json/upload/demo.js'
,accept: 'images'
,method: 'get'
,acceptMime: 'image/*'
,done: function(res){
$(this.item).prev("div").children("input").val(res.data.src)
}
});
})
</script>
{/block}
<!-- </body> -->
<!-- </html> -->
浙公网安备 33010602011771号