扩展自 $.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="width: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‘,width:60}, 10 {field:‘name‘,title:‘Name‘,width:100}, 11 {field:‘addr‘,title:‘Address‘,width:120}, 12 {field:‘col4‘,title:‘Col41‘,width: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‘,width:60}, 9 {field:‘name‘,title:‘Name‘,width:100}, 10 {field:‘addr‘,title:‘Address‘,width:120}, 11 {field:‘col4‘,title:‘Col41‘,width: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 });
方法
通过 $.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 });
扩展自$.fn.textbox.defaults,使用$.fn.filebox.defaults重写默认值对象。
FileBox(文件框)组件在表单当中表示一个文件上传的字段。它扩展自 textbox (文本框),大部分的属性、事件和方法都继承自文本框。但是由于浏览器的安全问题,其中的某些方法(如:"setValue")则不能用于 filebox 组件。
创建
1 -- 标签 2 <input class="easyui-filebox" style="width:300px"> 3 --js 4 <input id="fb" type="text" style="width:300px"> 5 6 $(‘#fb‘).filebox({ 7 buttonText: ‘选择文件‘, 8 buttonAlign: ‘left‘ 9 })
属性
使用$.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 });
事件
方法
原文:https://www.cnblogs.com/MirZhai/p/10863953.html