easyui系列之表单二Combogrid,Form,filebox,CheckBox（3）

1、Combogrid组合网格

扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults。通过 $.fn.combogrid.defaults 重写默认的 defaults。

组合网格（combogrid）把可编辑的文本框和下拉数据网格面板结合起来，用户可以从下拉数据网格面板中快速查找和选择。组合网格（combogrid）提供了选择某个项目的键盘导航支持。

创建组合网格（依赖：combo和datagrid)

a、标记创建

 1 <select id="cc" class="easyui-combogrid" name="dept" style="250px;"
 2     data-options="
 3     panelWidth:450,
 4     value:'006',
 5     idField:'code',
 6     textField:'name',
 7     url:'datagrid_data.json',
 8     columns:[[
 9     {field:'code',title:'Code',60},
10     {field:'name',title:'Name',100},
11     {field:'addr',title:'Address',120},
12     {field:'col4',title:'Col41',100}
13     ]]
14     "></select>

b、js从已有的<select>或<input>元素创建

1 <input id="cc" name="dept" value="01">

 1  $('#cc').combogrid({
 2     panelWidth:450,
 3     value:'006',
 4     idField:'code',
 5     textField:'name',
 6     url:'datagrid_data.json',
 7     columns:[[
 8     {field:'code',title:'Code',60},
 9     {field:'name',title:'Name',100},
10     {field:'addr',title:'Address',120},
11     {field:'col4',title:'Col41',100}
12     ]]
13     });

属性

filter：function(q, row) 定义当 'mode' 设置为 'local' 时如何选择本地数据。返回 true 则选择该行。
代码实例：

1 $('#cc').combogrid({
2     filter: function(q, row){
3         var opts = $(this).combogrid('options');
4         return row[opts.textField].indexOf(q) == 0;
5     }
6 });

方法

2、Form 表单

通过 $.fn.form.defaults 重写默认的 defaults。

表单（form）提供多种方法来执行带有表单字段的动作，比如 ajax 提交、加载、清除，等等。当提交表单时，调用 'validate' 方法来检查表单是否有效。

创建一个简单的 HTML 表单。构建表单并给 id、action、method 赋值。

 1 <form id="ff" method="post">
 2     <div>
 3         <label for="name">Name:</label>
 4         <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
 5     </div>
 6     <div>
 7         <label for="email">Email:</label>
 8         <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />
 9     </div>
10     ...
11 </form>

让表单（form）成为 ajax 提交的表单（form）

 1 $('#ff').form({
 2     url:...,
 3     onSubmit: function(){
 4         // do some check
 5         // return false to prevent submit;
 6     },
 7     success:function(data){
 8         alert(data)
 9     }
10 });
11 // submit the form
12 $('#ff').submit();

去做一个提交动作

 1 $('#ff').form('submit', {
 2     url:...,
 3     onSubmit: function(){
 4         // do some check
 5         // return false to prevent submit;
 6     },
 7     success:function(data){
 8         alert(data)
 9     }
10 });

通过额外的参数提交

$('#ff').form('submit', {
    url:...,
    onSubmit: function(param){
        param.p1 = 'value1';
        param.p2 = 'value2';
    }
});

事件

方法

submit 做提交动作，options 参数是一个对象，它包含下列属性：

url：动作的 URL
onSubmit：提交之前的回调函数
success：提交成功之后的回调函数

load 加载记录来填充表单。data 参数可以是一个字符串或者对象类型，字符串作为一个远程 URL，否则作为一个本地记录。

$('#ff').form('load','get_data.php');    // load from URL
 
$('#ff').form('load',{
    name:'name2',
    email:'mymail@gmail.com',
    subject:'subject2',
    message:'message2',
    language:5
});

3、filebox 文件框

扩展自$.fn.textbox.defaults，使用$.fn.filebox.defaults重写默认值对象。

FileBox(文件框)组件在表单当中表示一个文件上传的字段。它扩展自 textbox (文本框)，大部分的属性、事件和方法都继承自文本框。但是由于浏览器的安全问题，其中的某些方法（如："setValue"）则不能用于 filebox 组件。

创建

1   -- 标签
2 <input class="easyui-filebox" style="300px">
3   --js
4   <input id="fb" type="text" style="300px">
5 
6     $('#fb').filebox({
7                 buttonText: '选择文件',
8                 buttonAlign: 'left'
9             })

属性

4、CheckBox 复选框

使用$.fn.iCheckbox.defaults重写默认值对象。

使用

 --标签
<form id="ff">
                        <div style="margin-bottom:20px">
                            <input data-toggle="topjui-checkbox" name="fruit" value="Apple" label="Apple:">
                        </div>
                        <div style="margin-bottom:20px">
                            <input data-toggle="topjui-checkbox" name="fruit" value="Orange" label="Orange:">
                        </div>
                        <div style="margin-bottom:20px">
                            <input data-toggle="topjui-checkbox" name="fruit" value="Banana" label="Banana:">
                        </div>
                    </form>


--js
$('#ck').iCheckbox({
                        label: 'Apple:',
                        value: 'Apple',
                        checked: true
                    });

事件

方法