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

1、Combogrid组合网格

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

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

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

a、标记创建

<select id="cc" class="easyui-combogrid" name="dept" style="250px;"
    data-options="
    panelWidth:450,
    value:'006',
    idField:'code',
    textField:'name',
    url:'datagrid_data.json',
    columns:[[
    {field:'code',title:'Code',60},
    {field:'name',title:'Name',100},
    {field:'addr',title:'Address',120},
    {field:'col4',title:'Col41',100}
    ]]
    "></select>

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

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

 $('#cc').combogrid({
    panelWidth:450,
    value:'006',
    idField:'code',
    textField:'name',
    url:'datagrid_data.json',
    columns:[[
    {field:'code',title:'Code',60},
    {field:'name',title:'Name',100},
    {field:'addr',title:'Address',120},
    {field:'col4',title:'Col41',100}
    ]]
    });

属性

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

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

方法

2、Form 表单

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

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

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

<form id="ff" method="post">
    <div>
        <label for="name">Name:</label>
        <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
    </div>
    <div>
        <label for="email">Email:</label>
        <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />
    </div>
    ...
</form>

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

$('#ff').form({
    url:...,
    onSubmit: function(){
        // do some check
        // return false to prevent submit;
    },
    success:function(data){
        alert(data)
    }
});
// submit the form
$('#ff').submit();

去做一个提交动作

$('#ff').form('submit', {
    url:...,
    onSubmit: function(){
        // do some check
        // return false to prevent submit;
    },
    success:function(data){
        alert(data)
    }
});

通过额外的参数提交

$('#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 组件。

创建

  -- 标签
<input class="easyui-filebox" style="300px">
  --js
  <input id="fb" type="text" style="300px">

    $('#fb').filebox({
                buttonText: '选择文件',
                buttonAlign: 'left'
            })

属性

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
                    });

事件

方法