小左闲谈

jQuery使用change事件获取select当前值并动态赋值

In 学习  @2016-03-04

需求描述:
在文章编辑页面:
QQ截图20160304171422
当我们通过下拉菜单选择不同分类的时候,需要将该分类的值赋值给一个hidden类型的元素,在提交修改或添加的时候将这个值写入数据库标识文章的分类,由于选择的值是变化的,在不重新加载页面的情况下,完成动态赋值。

模板文件:

<form class="form-horizontal" role="form" action="{:U('Blog/adds')}" method="post">
<input type="hidden" id="ptitle" name="ptitle" value="{$_GET.title}">
<input type="hidden" name="id" value="{$_GET.id}">
	<div class="form-group">
		<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 父类目</label>
		<div class="col-sm-9">
		<!-- 栏目选择下拉框 -->
			<select class="col-xs-10 col-sm-5" name="pid" id="pid">
				<volist name="list" id="list">
				<option value="{$list.id}" <if condition="$list['id'] eq $_GET['pid']">selected="selected"</if> >{$list.title}</option>
				</volist>
			</select>
		</div>
	</div>
	<div class="clearfix form-actions">
		<div class="col-md-offset-3 col-md-9">
			<button class="btn btn-info" type="submit">
				<i class="icon-ok bigger-110"></i>
				提交
			</button>
			&nbsp; &nbsp; &nbsp;
			<button class="btn" type="reset">
				<i class="icon-undo bigger-110"></i>
				重置
			</button>
		</div>
	</div>
</form>

当pid发成改变的时候,获取option:selected文本给ptitle赋值

<script>
$("#pid").change(function() {	
	 var ptitle = $(this).find("option:selected").text();		 
	 $("#ptitle").attr("value",ptitle);
})
</script>
 
// 20170718更新,这样来获取select的选中项的值value和文本text
//文本
$('#pid option:selected').text();
$('#pid option:selected').val();
标签: , ,   评论: 2枚 

Ajax弹窗编辑无刷新查询赋值

In 学习  @2016-03-04

题目很拗口,需求是这样的;
在项目中有一个列表页的右侧的编辑按钮是弹窗式的这时候就没有url跳转,无法使用一般的跳转查询取值,需要通过点击触发取值查询并赋值的过程。

首先封装了一个jQuery的Ajax函数:

function addhidden(id,url){
	var res = 0;
	var data ={"id":id};
	res = $.ajax({
		type:'POST',
		url:url,
		data:data,
		async :false,
		dataType : "json",
		success: function(data){
		},
	})
	res = res.responseText;
	res = eval("("+res+")");
	return res;
	}

调用上面的addhidden函数查询值并返回数据;

//当点击该标签时触发事件
$(".btn.btn-xs.btn-info.addhidden").click(function(){
        //调用ThinkPHP控制器中的isfind函数执行查询
	var url="{:U('Blog/isfind')}";
	//从模板num标签中为id赋值
        var id= $(this).attr("num");
	var data = addhidden(id,url);
	$("#id").val(data.id);
	$("#form-field-mask-2").val(data.title);
	$("#form-field-mask-3").val(data.sort);

Blog控制器类的isfind函数:

//弹窗修改分类取值
public function isfind(){
    if($_POST['id']){
        $blog=M("blog");
        $res=$blog->where(array('id'=>$_POST['id']))->field("id,title,sort")->find();
        $this->ajaxReturn($res);
    }
}

模板文件:

<tbody>
	<volist id="list" name="list">
	<tr>
		<td>{$list.title}</td>
		<td>{$list.time}</td>
		<td>
			<div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
				<a class="btn btn-xs btn-info addhidden" href="#" name="edit" data-toggle="modal" data-target="#Edit" num="{$list.id}" title="编辑">
				<i class="icon-edit bigger-120"></i>
				</a>
				<a class="btn btn-xs btn-danger" name="trash" title="删除" num="{$list.id}">
				<i class="icon-trash bigger-120"></i>
				</a>
				<a class="btn btn-xs btn-warning" href="{:U('Blog/adds',array('pid'=>$list['id'],'title'=>$list['title']))}" name="add" title="添加" num="{$list.id}">
				<i class="icon-plus bigger-120"></i>
				</a>	
				<a class="btn btn-xs btn-success" href="{:U('Blog/mulcolum',array('pid'=>$list['id'],'title'=>$list['title']))}" name="view" title="所属内容" num="{$list.id}">
				<i class="icon-list bigger-120"></i>查看所属内容
				</a>																
			</div>
		</td>
	</tr>
	</volist>
</tbody>
标签: , ,   评论: 抢沙发 

ThinkPHP3.2.3实例:volist循环实现分类及文章嵌套输出

In 学习  @2016-03-04

使用ThinkPHP3.2.3开发项目中遇到一个简单而常见的问题。
一个表的下面包含了分类和分类下的文章,先在需要在页面底部分类显示博客的标题,一般我们用Volist标签来循环取值,这里有分类,使用一次volist的嵌套。
数据表结构:
MySQL表结构
需求的效果:
QQ截图20160304155235
控制器:

$blog = M('blog');
$bloglist=$blog->where(array('show'=>1,'pid'=>0))->field('id,title')->limit(3)->order('sort asc')->select();
foreach ($bloglist as $k => $v) {
    $bloglist[$k]["child"]=$blog->where(array('pid'=>$v['id'],'show'=>1))->field('id,title,pid')->order("time desc")->limit(8)->select();
}
$this->assign("bloglist",$bloglist);

前台模板文件:

<volist name="bloglist" id="bloglist">
	<div class="col-md-3 footer-grid">
		<h3>{$bloglist.title}</h3>
			<ul>
			<volist name="bloglist.child" id="child">
			<li><a href="{:U('Blog/details',array('id'=>$child['id']))}">{$child.title}</a></li>
			</volist>
			</ul>
	</div>
</volist>

在工作中遇到的问题,自己不太懂的我就记下来吧,下次再用到就会熟练一点。

标签: , ,   评论: 抢沙发