请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

亿仁网

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 524|回复: 1

用OneThink框架中二次开发实现图集编辑表单页

[复制链接]
  • TA的每日心情
    奋斗
    2019-3-14 22:24
  • 签到天数: 160 天

    [LV.7]常住居民III

    1074

    主题

    1139

    帖子

    1万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    18046
    发表于 2017-5-23 16:34:14 | 显示全部楼层 |阅读模式

    在完成图集列表页开发后,如何实现图集编辑页、表单提交和图片上传等数据新增、编辑功能。首先在PhotosController控制器中新增edit()方法,代码如下:

    1.         // 图集编辑界面
    2.         public function edit(){
    3.                 $id = I('id');
    4.                 if($id)
    5.                 {
    6.                         // 查询已经存在的信息
    7.                         $this->assign('info' ,M('photos')->where(array('id'=>$id))->find());
    8.                 }
    9.                 $this->meta_title = "编辑图集信息";
    10.                 $this->display();
    11.         }
    复制代码

    同时在根目录Application/Admin/View/Photos下新增edit.html页面,并在body中引入JavaScript文件并上传类jquery.uploadify.min.js文件,形成添加基本结构代码如下:

    1. <extend name="Public/base"/>
    2. <block name="body">
    3.     <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    4.     <div class="main-title">
    5.         <h2>{$meta_title}</h2>
    6.     </div>
    7. </block>
    8. <block name="script">
    9.     <script type="text/javascript">
    10.         //导航高亮
    11.         highlight_subnav('{:U('Photos/index')}');
    12.     </script>
    13. </block>
    复制代码

    增加表单基本结构代码如下:

    1.     <form action="{:U('update')}" method="post" class="form-horizontal">
    2.         <input type="hidden" name="id" value="{$info.id}">
    3.         <div class="form-item">
    4.             <label class="item-label">图集名称<span class="check-tips"></span></label>
    5.             <div class="controls">
    6.                 <input type="text" class="text input-large" name="name" value="{$info.name}">
    7.             </div>
    8.         </div>
    9.         <div class="form-item">
    10.             <label class="item-label">图集简介<span class="check-tips"></span></label>
    11.             <div class="controls">
    12.                 <textarea class="textarea" name="content" cols="80" rows="5">{$info.content}</textarea>
    13.             </div>
    14.         </div>
    15.         <div class="form-item">
    16.             <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">确 定</button>
    17.             <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
    18.         </div>
    19.     </form>
    复制代码

    框架提供了多种输入框的样式,可以满足多种需求,先通过对input标签增加class属性text可以添加基本显示样式,再追加input-large/mid/small/mini/1-8x样式可以控制表单的宽度。给不同input设置不同宽度的代码如下:

    1.     <p><input type="text" class="text input-lare" name="name" value="input-large" /></p>
    2.     <p><input type="text" class="text input-mid" name="name" value="input-mid" /></p>
    3.     <p><input type="text" class="text input-small" name="name" value="input-small" /></p>
    4.     <p><input type="text" class="text input-mini" name="name" value="input-mini" /></p>
    5.     <p><input type="text" class="text input-8x" name="name" value="input-8x" /></p>
    6.     <p><input type="text" class="text input-4x" name="name" value="input-4x" /></p>
    7.     <p><input type="text" class="text input-x" name="name" value="input-x" /></p>
    复制代码

    设置input标签的不同效果图图所示

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    造物之前,必先造人。
    回复

    使用道具 举报

  • TA的每日心情
    奋斗
    2019-3-14 22:24
  • 签到天数: 160 天

    [LV.7]常住居民III

    1074

    主题

    1139

    帖子

    1万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    18046
     楼主| 发表于 2017-5-23 17:51:48 | 显示全部楼层
    已转载于头条、企鹅(行家汇)等,发表于2017年5月23日第三篇
    造物之前,必先造人。
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|亿仁网 ( 粤ICP备16098737  

    GMT+8, 2020-8-12 05:33 , Processed in 0.217682 second(s), 27 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表