- 个人觉得 不管是什么 CMS内容管理框架 基本上都是为了简化 使用者的操作难度 而设计的一套根据使用者的需求而自动生成 一套简易 使用的网页.
- 但作为开发人员 往往需要根据 需求 不停的增加 功能.如果是新手,需要开发,那么会一筹莫展.根本不知道如何解决.
- 对于这样问题,想去该一些样式,一些操作.难免会很难操作.
我的解决方式:
在框架拿到数据的基础上 在页面 用js 自动生成 操作按钮 然后用ajax post请求进行数据处理
这样不但简单方便,而且与原有框架内容 互不干扰.
简易设置排序的例子:
//获取页面遍历的元素 进行动态生成 操作按钮
$('tbody tr').each(function()
{
//生成 排序按钮
var type = $(this).find('td').eq(3).html();
var id = $(this).find('td').eq(1).html();
var a = ' <a href="#" class="btn btn-successc checkup" id=" '+ id + '" type="' + type + '" style=""> 上移 </a> '+' <a href="#" class="btn btn-successc checkdown" id=" '+ id + '" type="' + type + '" style=""> 下移 </a> ';
$(this).find("td").eq(4).append(a);
})
//防止点击过快 造成数据出错
var checkstatus = 0;
//向上排序事件
$('.checkup').click(function () {
var type = $(this).attr('type');
var id = $(this).attr('id');
var brther = $(this).parent().parent().prev();
var btype = brther.find('td').eq(3).html();
//判断上一个元素是否是跟自己同一个类
if (type == btype) {
if (checkstatus != 0) {
alert('操作太快了');
return false;
}
$.ajax({
url:"{:U('xxx/xxx')}",
type:'post',
dateType:'json',
data:{'id':id,'type':type},
success:function (data) {
if(data.status == 1) {
checkstatus = 1;
window.location.reload();
}
}
});
} else {
alert('已经是最前了!~');
}
return false;
})
//向下排序事件
$('.checkdown').click(function () {
var type = $(this).attr('type');
var id = $(this).attr('id');
var brther = $(this).parent().parent().next();
var btype = brther.find('td').eq(3).html();
//判断上一个元素是否是跟自己同一个类
if (type == btype) {
if (checkstatus != 0) {
alert('操作太快了');
return false;
}
$.ajax({
url:"{:U('xxx/xxx')}",
type:'post',
dateType:'json',
data:{'id':id,'type':type},
success:function (data) {
if(data.status == 1) {
checkstatus = 1;
window.location.reload();
}
}
});
} else {
alert('已经是最后了!~');
}
return false;
})
然后可以在指定控制器 写逻辑代码
public function checkup()
{
$data = $_POST;
$uptype = $data['type'];
$where['type'] = $uptype;
$res = M('表名');
//根据类型排序 查询上一个需要替换的 usort 和自己的 msort
$mid = $data['id']; //自己 id
$msort['sort'] = ''; //自己的sort
$tsort['sort'] = ''; //上一个sort
$tid = '';//上一个 ID
$code = $res->where($where)->order('排序字段')->select();
if ($code) {
//遍历需要的值
foreach ($code as $k => $v) {
if ($v['id'] == $mid) {
$msort['sort'] = $v['sort'];
$tid = $code[$k - 1]['id'];
$tsort['sort'] = $code[$k - 1]['sort'];
}
}
$a = $res->where('id = ' . $tid)->save($msort);
$b = $res->where('id = ' . $mid)->save($tsort);
if ($a && $b) {
$datas['status'] = 1;
$datas['message'] = '成功';
$this->ajaxReturn($datas);
} else {
$datas['status'] = 0;
$datas['message'] = '失败';
$this->ajaxReturn($datas);
}
}
}
public function checkdown()
{
$data = $_POST;
$uptype = $data['type'];
$where['type'] = $uptype;
$res = M('表名');
//根据类型排序 查询上一个需要替换的 usort 和自己的 msort
$mid = $data['id']; //自己 id
$msort['sort'] = ''; //自己的sort
$tsort['sort'] = ''; //下一个sort
$tid = '';//下一个 ID
$code = $res->where($where)->order('排序字段')->select();
if ($code) {
//遍历需要的值
foreach ($code as $k => $v) {
if ($v['id'] == $mid) {
$msort['sort'] = $v['sort'];
$tid = $code[$k + 1]['id'];
$tsort['sort'] = $code[$k + 1]['sort'];
}
}
$a = $res->where('id = ' . $tid)->save($msort);
$b = $res->where('id = ' . $mid)->save($tsort);
if ($a && $b) {
$datas['status'] = 1;
$datas['message'] = '成功';
$this->ajaxReturn($datas);
} else {
$datas['status'] = 0;
$datas['message'] = '失败';
$this->ajaxReturn($datas);
}
}
}
优雅简单的操作
$('.search-form').find('input').keyup(function (event) {
if (event.keyCode === 13) {
$("#search").click();
}
});
$('tbody tr').each(function () {
$(this).find('td').eq(2).find('a').attr('target', '_blank');
var id = $(this).find('td').eq(1).html();
var newurl = "{:U('xxx/xxx/xxx')}";
$(this).find('td').eq(2).find('a').attr('href', newurl);
//遍历添加所有input 框 并赋值
if ($(this).find('td').eq(4).html()) {
var id = $(this).find('td').eq(1).html();
var data = $(this).find('td').eq(4).html();
$(this).find('td').eq(4).html('<label><input class="alertaction" id="' + 'cid' + id + '" style="width: 30px;text-align: center;" type="text" name="zuire" value="' + data + '"/></label>');
$(this).find('td').eq(4).css('width', '15%');
$('input[name="zuire"]').on({
focus: function () {
$('.setSort').removeClass('hide');
$(this).next().removeClass('hide');
}
});
}
})
//自定义方法 将所有需要传入的值 转成数组 **********************
var getArray=function (e) {
var a=[];
$(e).each(function () {
a.push({
name : $(this).attr('id').replace('cid', ''),
val : $(this).val()
})
})
return a;
}
//点击发送处理
$('.setSort').click(function () {
var thiss = $(this);
$.ajax({
url:"{:U('xxx/xxx')}",
type:'post',
dateType:'json',
data: {
data:getArray('.alertaction') //*****************************
},
success:function (data) {
if (data) {
thiss.addClass('hide');
//延迟1秒刷新
setTimeout(function(){window.location.reload();},1000);
}
}
})
})
网友评论