快轉到主要內容

Drupal7中自定义表格输入

·1240 字·3 分鐘
Y Cheung
作者
Y Cheung
Blogger, Programer & Traveler.

Drupal默认的节点表单(entity form)输入有时候并不能满足我们的需求,比如我想做一个类似excel表格输入形式的表单呢?

  • = DEMO点这里 (PS. 用Pantheon的sandbox做了一个随意折腾的drupal站点,真的是折腾死我了= =)

首先,新建一个自定义模块,在你的*.module文件中hook_menu() 指定一个页面路径,设置页面调用表单,比如这样:

 1function demo_tableform_menu(){
 2    $items = array();
 3    $items['demo/theme_table_into_form'] = array(
 4        'title callback' => '表格方式輸入表單',
 5        'page callback' => 'drupal_get_form',
 6        'page arguments' => array('classroomtable_form'),
 7        'access callback' => TRUE,
 8    );
 9
10    return $items;
11}

然后hook_form()把这个表格的基本元素写出来,用#header标签设置表格的表头部分,填充表格的每一行就用#rows标签,表单元素常见的input name用#name表示,标签#theme是用来设置之后如何渲染这个表单的,最后用$form['submit']设置表单提交后的动作。这整段的代码可以写成这样:

 1function classroomtable_form($form, &$form_state){
 2    $header = array(
 3        'sex'=>'性別',
 4        'number'=>'人數',
 5        'height'=>'平均身高',
 6        'classroom'=>'班級',
 7    );
 8    $options = array();
 9    $options[] = array(
10        'sex' =>array(
11            'data' =>array(
12                '#type'=>'select',
13                '#name'=>'sex',
14                '#options'=>array(
15                    'F'=>'女',
16                    'M'=>'男'
17                ),
18            ),
19        ),
20        'number'=>array(
21            'data'=>array(
22                '#type'=>'textfield',
23                '#name'=>'number',
24                '#attributes'=>array(
25                    'placeholder' => 0,
26                ),
27                '#size'=>12,
28            ),
29        ),
30        'height'=>array(
31            'data'=>array(
32                '#type'=>'textfield',
33                '#name' => 'height',
34                '#attributes' => array(
35                    'placeholder' => 0,
36                ),
37                '#size'=>12,
38            ),
39        ),
40        'classroom'=>array(
41            'data'=>array(
42                '#type'=>'textfield',
43                '#name' => 'classroom',
44                '#size' => 12,
45            ),
46        ),
47    );
48
49    $form['table'] = array(
50        '#theme' => 'demo_tableform_form',
51        '#header' => $header,
52        '#tree' => TRUE,
53        '#rows' => $options,
54        '#empty' => t('No content available.'),
55    );
56
57    $form['submit'] = array(
58        '#type' => 'submit',
59        '#submit' => array('classroomtable_submit'),
60        '#value' => t('Save'),
61    );
62
63    return $form;
64}

比较方便的是,利用rows array key的设置还能区分每一行的不同值,比如下面这段代码,表单提交后sex[3]就是用户在这行选择的值了,在多行表单中这种区分有时是非常有用的 :

 1 $key = 3;
 2 $options[$key] = array(
 3    'sex' =>array(
 4            'data' =>array(
 5                '#type'=>'select',
 6                '#name'=>'sex[{$key}]',
 7                '#options'=>array(
 8                    'F'=>'女',
 9                    'M'=>'男'
10                ),
11            ),
12        ),
13...

表格(table render)渲染部分:

 1/**
 2 * @return array
 3 */
 4function demo_tableform_theme()
 5{
 6    return array(
 7        'demo_tableform_form' => array(
 8            'render element' => 'form',
 9        ),
10    );
11}
12
13/**
14 * @param $variable
15 * @return string
16 */
17function theme_demo_tableform_form(&$variable)
18{
19    $form = $variable['form'];
20    $rows = $form['#rows'];
21    $header = $form['#header'];
22    $content = array(
23        '#theme' => 'table',
24        '#header' => $header,
25        '#rows' => $rows,
26    );
27    return drupal_render($content);
28}

最后把表单提交后的逻辑写一写就大功告成啦!表单提交内容用的是$form_state['input']内的值。

 1function classroomtable_submit($form, &$form_state){
 2    $sex = $form_state['input']['sex']; //F or M
 3    $number = $form_state['input']['number']; //int
 4    $height = $form_state['input']['height']; //demecal
 5    $classroom = $form_state['input']['classroom'];  //text
 6    if($number <= 0 || !(is_numeric($number) && is_int($number+0))){
 7        form_set_error('number','请输入正确的人数');
 8    }elseif($height <= 0|| !(is_numeric($height))){
 9        form_set_error('height','请输入正确的身高');
10    }else{
11        $entity = entity_create('class_resourece',array('type'=>'class_resourece_basic'));
12        $ew = entity_metadata_wrapper('class_resourece', $entity);
13        $ew->created->set(time());
14        $ew->field_gender->set($sex);
15        $ew->field_numberof->set($number);
16        $ew->field_heights->set($height);
17        $ew->field_class->set($classroom);
18        $ew->save();
19        $form_state['redirect'] = '<front>';
20    }
21}

相關文章

Drupal7 中Restful模组应用简单介绍

·1918 字·4 分鐘
安装并启用Restful Module # Restful 2.x 下载 drush 安装 drush dl restful, drush en restful 自定义RESTFUL API模组 # 可参考restful里的范例 sites/all/modules/restful/modules/restful_example 或者测试文件内容 sites/all/modules/restful/tests 模组文件结构 # 1custom_restfulapi/ 2├─ src/ 3│ ├─ Plugin/ 4│ │ ├─ resource/ 5│ │ │ ├─ entity/ 6│ │ │ │ ├─ Testentity__1_0.php 7├─ custom_restfulapi.info 8├─ custom_restfulapi.module API RESOURCES要放在src/Plugin下。 *.info 和 *.module 的内容跟其他自定义模组的相差无几,方法一样,此处从略。

Krpano Panoramic Video Embed Wordpress plugin

·380 字·1 分鐘
krpano 做 Panoramic Video 的時候很麻煩(官網說明太簡單),要自己改一堆東西然後上傳,然後再用iframe的方式在wordpress 文章或者頁面中加載,一整個就煩透了。於是用空閒時間順手做了這個插件,稍微簡化了一下流程。 軟體版本: # Wordpress 版本 4.3.1 Krpano 版本 1.18 插件下載: # Github BOX 安裝插件: # 文件解壓縮至 /wp-content/plugins/ 將你購買的krpano程序中相應的文件替換掉本插件中的文件,包括 /krpano/krpano.js 和 /krpano/krpano.swf ,(本插件中的文件源自未授權demo版,請自行購買授權)。 登錄wordpress後台,並激活插件 使用插件: # 將 Panoramic Video 壓制成 1920x960 和 1024x512 尺寸,推薦WEBM格式或MP4格式 製作 Panoramic Video 封面縮略圖兩張,尺寸分別為1920x960 像素 和 1024x512 像素 將視頻和圖片通過FTP上傳至 /krpano/video 文件夾中 點擊編輯器上的按鈕(如下圖所示)在需要嵌入Panoramic Video的地方插入代碼 務必完整填寫完所有表單(如下圖示) 5. 如需自定義XML,文件放在 /krpano/xml 中

Unity3D製作Cardboard全景VR應用

·1481 字·3 分鐘
本文中所使用的軟體 # Unity3D 5.1.2f1 (官方下載地址) Unity 版的 Cardboard SDK(官方下載地址) Java SE Development Kit 8 (官方下載地址) Android SDK (官方下載地址) PTGui (可選) 操作步驟 # 新建 Unity3D 工程 # 在Unity中新建一個工程: VRtour

全景圖製作軟體PTGui與Kolor AutopanoGiga之初體驗

·1027 字·3 分鐘
全景图(panorama)是一种广角图,可以以画作、照片、影片、三维模型的形式存在。 全景,指於球體的空間狀態,視角涵蓋地平線+/-各180°,垂直+/-各90°,就立方體的空間狀態,即為上下前後左右六個面完全包含。尤於水平角度為360°,垂直為180°,能表達這種模式的照片有很多種,又跟球面的投影有關(類似繪製世界地圖的投影,但是是內投影)。 1

DokuWiki 安装及使用

·609 字·2 分鐘
最近搭建了一个私密wiki用来管理知识碎片及资料等,Y.Cheung 选择了DokuWiki这款开源wiki引擎。 DokuWiki优点: # 轻便、简洁、可扩展性强 免数据库,data直接保存为txt 用户众多,方便搜寻及使用各种资源 支持markdown语法 支持ACL权限控制 基于PHP DokuWiki缺点: # 无移动平台客户端(在github上有找到这个开发项目但已经停止更新好几年了) 默认界面简陋难看,提供下载的模版也很丑 使用上手有一定的学习成本 安装DokuWiki: # 在下载页面选择你要的版本、语言、插件等后下载.tgz文件到本地,再上传至Server 解压缩安装包后在浏览器中访问 http://yourdomain/path_to_dokuwiki/install.php,根据提示进行即可 对文件及文件夹进行权限设置,特别是data文件夹的权限 启用默认的.htaccess 文件,按需要去除文件内的#符号 更改主页图标LOGO,在多媒体管理器中的wiki分类中上传你的logo.png即可 安装插件(http://yourdomain/path_to_dokuwiki/home?do=admin&page=extension),除了默认插件外,根据需要安装了常用的tag plugin ,Pagelist Plugin ,New PHP Markdown plugin ,Indexmenu Plugin ,可以参考蔡宗融的推荐 开始使用Dokuwiki: # 基本编辑语法(官方文档) 创建新页面(参考)