3.表单-easyUi

最新推荐文章于 2022-10-24 10:25:37 发布

启福铭远

最新推荐文章于 2022-10-24 10:25:37 发布

阅读量964

点赞数

分类专栏： Jquery/EasyUi/Bootstrap

本文链接：https://blog.csdn.net/wangwei249/article/details/51578347

版权

Jquery/EasyUi/Bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一。表单-form

1. 创建表单

<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>

2. 使表单成为ajax提交的表单：

$('#ff').form({
    url: ...,
    onSubmit: function() {
        var isValid = $(this).form('validate');
        // 当form不合法的时候隐藏工具条
        if (!isValid) {
            $.messager.progress('close');
        }
        return isValid; // 返回false将停止form提交 

    },
    success: function(data) {
        //假设返回的是json字符串
        var data = eval('(' + data + ')');
        if (data.success) {
            alert(data.message)
        }

    }
});
// submit the form   
$('#ff').submit();

3. 执行提交动作

$('#ff').form('submit', {
    url: ...,
    onSubmit: function() {
        var isValid = $(this).form('validate');
        // 当form不合法的时候隐藏工具条
        if (!isValid) {
            $.messager.progress('close');
        }
        return isValid; // 返回false将停止form提交 


    },
    success: function(data) {
        //假设返回的是json字符串
        var data = eval('(' + data + ')');
        if (data.success) {
            alert(data.message)
        }


    }
});

二。表单验证 - ValidateBox

validatebox是设计验证表单输入字段的,如果用户输入不合法数据,它将改变它的背景颜色,显示一个警告的icon和一个提示信息,
validatebox可以用于整个form的插件,它将阻止不合法的字段从form提交

从标记创建validatebox：

  <input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />

使用javascript创建validatebox：

    <input id="vv" />  
    <script>
	    $('#vv').validatebox({   
		    required: true,   
		    validType: 'email'  
	    });  
    </script>

三。验证规则

验证规则是定义在required和validType属性上,以下的规则已经实现了
email: 匹配email正则规则 .
url: 匹配URL正则规则 .
length[0,100]: 允许在x到x之间的字符数.
remote['http://.../action.do','paramName']: 发送ajax请求验证值,当成功之后返回'true'.

自定义验证规则,重写 $.fn.validatebox.defaults.rules定义一个validator(验证器)函数和一个invalid(不合法)信息,
例如:定义一个minLength(最小长度)验证类型

   $.extend($.fn.validatebox.defaults.rules, {   
	    minLength: {   
		validator: function(value, param){   
		    return value.length >= param[0];   
		},   
		message: 'Please enter at least {0} characters.'  
	    }   
   });

使用方法：

 <input class="easyui-validatebox" data-options="validType:'minLength[5]'">

四。自定义组合框 - combo

   <input id="cc" value="001"> 
    $('#cc').combo({   
	    required:true,   
	    multiple:true  
    });

五。可装载组合框 - ComboBox
combobox显示的是一个可以编辑的文本框和一个下拉列表.允许用户从里面选择一个或者是多个值,
用户可以直接输入值到列表顶部,或者可以从列表选择一个或多个现有值.

1. 直接用data指定下拉框的值，是个对象数组,multiple可控制是否多选

    <input id="cc" class="easyui-combobox" name="dept"  value="wangwei" multiple="true" 
                   data-options="valueField:'id',textField:'text',data:[{id:'aaa',text:'bbb'},{id:'ccc',text:'ddd'}]" />

2. 也可通过url载入一个json对象

    <input id="cc" class="easyui-combobox" name="dept"  value="wangwei" multiple="true" 
                   data-options="valueField:'id',textField:'text',url:'../autotest/testAction.do?method=getJsonStr'"/>

服务器端返回json对象代码示例:

    public ActionForward getJsonStr(ActionMapping mapping, ActionForm form, 
            HttpServletRequest request,
            HttpServletResponse response) throws IOException {
    	
		String contentType = "text/xml;charset=GBK";
		response.setContentType(contentType);
		response.setHeader("Cache-Control", "no-cache");
		//方式一
		List list = new ArrayList();
		Map map = new HashMap();
		map.put("id", "aaa");
		map.put("text", "aaa111");
		list.add(map);
		//方式二
		//String str = "[{'id':'aaa','text':'aaa'},{'id':'bbb','text':'bbb'},{'id':'ccc','text':'ccc'}]";
		//方式三
		EasyUi eu = new EasyUi();
		eu.setId("a1");
		eu.setText("a1");
		EasyUi eu2 = new EasyUi();
		eu2.setId("a2");
		eu2.setText("a2");
		list.add(eu);
		list.add(eu2);
		
		response.getWriter().print(JSONArray.fromObject(list).toString());
		return null;
      }

* list中同时放入map和EasyUi等不同的对象也是可以的，只要每个对象包含id，text属性即可。

3. 过滤，模糊搜索过滤功能 local 模式，数据一次性载入

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

* 加入上面即可实现按照输入的内容过滤列表，仅显示匹配的列表
* 也可使用脚本设置下拉小三角不显示，设置提示信息，取数url等

      $('#cc').combobox({
	    prompt:'输入关键字后自动搜索',        
	    required:true,        
	    url:'../autotest/testAction.do?method=getJsonStr',        
	    editable:true,        
	    hasDownArrow:false
      });

4. 过滤，模糊搜索过滤功能 remote 模式，输入后去查询，需要把参数传递到后台，后台根据参数查询

   $('#cc').combobox({
    prompt: '输入关键字后自动搜索',
    required: true,
    mode: 'remote',
    url: '../autotest/testAction.do?method=getJsonStr',
    editable: true,
    hasDownArrow: false,
    onBeforeLoad: function(param) {
        if (param == null || param.q == null || param.q.replace(/ /g, '') == '') {
            var value = $(this).combobox('getValue');
            if (value) { // 修改的时候才会出现q为空而value不为空
                param.id = value;
                return true;
            }
            return false;
        }
    }
   });

* 上面的脚本是remote模式过滤，每次输入时去后台查询数据，后台获取参数名称"q"的参数值去查询返回即可
String q = request.getParameter("q")==null?"":request.getParameter("q");

六。组合树 - ComboTree
combotree结合选择控制和下拉树,类似于combobox只是替换了列表为tree控件,combotree 支持树复选框,可以方便的实现多选

* 使用url加载数据：

    <select id="cc" class="easyui-combotree" style="width:200px;"  
        data-options="url:'../autotest/testAction.do?method=getJsonStr',required:true"></select>

* 也可使用脚本加载本地tree数据：

    $('#cc').combotree('loadData', [{
		id: 1,
		text: 'Languages',
		children: [{
			id: 11,
			text: 'Java'
		},{
			id: 12,
			text: 'C++'
		}]
    }]);

* 需要注意的是，tree数据比Combobox数据多了children 节点，用于显示子菜单，若再有下一级菜单，继续扩展即可，后台返回数据示例：

</pre><pre name="code" class="java">   String str = "[{'id':'aaa','text':'aaa',children:[{'id':'111','text':'111'},{'id':'222','text':'222'}]}
                   ,{'id':'bbb','text':'bbb',children:[{'id':'333','text':'333'},{'id':'444','text':'444'}]}]";
   response.getWriter().print(JSONArray.fromObject(str).toString());

七。组合表格 - ComboGrid
combogrid 关联了一个可编辑的文本框和一个下拉datagrid panel,允许用户从里面快速查找和选择,combogrid 提供按键导航选择项

  <select class="easyui-combogrid" style="width: 150px" id="cc" data-options=" 
            panelWidth: 500,
            idField: 'itemid',
            textField: 'productname',
            url: 'datagrid_data1.json',
            method: 'get',
            columns: [[
                {field:'itemid',title:'车辆ID',width:80},
                {field:'productname',title:'车工号',width:120},
                {field:'listprice',title:'发动机号',width:80,align:'right'},
                {field:'unitcost',title:'车牌号',width:80,align:'right'},
                {field:'attr1',title:'车型',width:200},
                {field:'status',title:'VIN码',width:60,align:'center'}
            ]],
            fitColumns: true">
   </select>

* 字段说明：
idField :
textField : 指定表格的那个字段值作为select的显示值
columns : 指定json数据的每列显示的名称和内容，宽度等

datagrid_data1.json数据示例：

  {"total":28,"rows":[
	{"productid":"FI-SW-01","productname":"安顺久******任公司","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
	{"productid":"K9-DL-01","productname":"安顺久******任公司","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"}
  ]}

* 获取选择值：
$('#cc').combogrid('getValues')

* 可以从已经存在的<select> or <input> 元素通过javascript创建.

   <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',width:60},   
		{field:'name',title:'Name',width:100},   
		{field:'addr',title:'Address',width:120},   
		{field:'col4',title:'Col41',width:100}   
	    ]]   
    });

* 添加一个高级的自动完成的函数功能到combogrid,下拉datagrid 根据用户的输入将显示适合的结果.
后台通过获取“q”的参数获取用户输入，返回匹配的结果集json对象

    $('#cc').combogrid({   
	    delay: 500,   
	    mode: 'remote',   
	    url: 'get_data.php',   
	    idField: 'id',   
	    textField: 'name',   
	    columns: [[   
		{field:'code',title:'Code',width:120,sortable:true},   
		{field:'name',title:'Name',width:400,sortable:true}   
	    ]]   
    });

八。数字输入框 - NumberBox
1. 根据标记创建numberbox ，只能输入大于0的数字，最多两位小数，

    <input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2"></input>

</pre>    2. 当然，也是通过脚本来改造一个输入框的。<pre name="code" class="javascript">    <input type="text" id="nn"></input>   
      $('#nn').numberbox({   
	 min:0,   
	 precision:2   
      });

3. 设置值和获取值

    $('#nn').numberbox('setValue', 206.12);

    var v = $('#nn').numberbox('getValue');

或

    var v = document.getElementById("nn").value;

九。日期组合框 - DateBox
datebox 关联了一个可编辑的文本框和一个下拉calendar panel(日期面板)并且允许用户选择一个日期,
输入一个字符串到文本框中能够转换为一个有效值选择日期也可以被格式化为你想要的格式.
1. 从标记创建datebox.

    <input id="dd" type="text" class="easyui-datebox" required="required"></input>

十。时间组合框 - DateTimeBox

   <input class="easyui-datetimebox" name="birthday"    
        data-options="required:true,showSeconds:false" value="3/4/2010 2:3" style="width:150px">

十一。日历 - Calendar

   <div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>

十二。数字调节器 - NumberSpinner

1.创建数值型的货币调节器

    <input id="ss" class="easyui-numberspinner" style="width:80px;"  
        required="required" data-options="min:10,max:100,editable:false">

2.创建货币型的数字调节器

    <input class="easyui-numberspinner" value="1234567890" style="width:150px;"  
        data-options="required:true,precision:2,groupSeparator:',',decimalSeparator:'.',prefix:'$'" />

十三。时间调节器 - TimeSpinner

1. 通过标记创建，不能早于8:30

    <input id="ss" class="easyui-timespinner"  style="width:80px;"  
        required="required" data-options="min:'08:30',showSeconds:true" />

十四。滑动条 - Slider
slider 允许用户从一个有效的范围选择一个数值.当沿着轨道移动拇指(鼠标指上去变拇指)控制,
一个提示将显示代表当前值,用户可以自定义slider ,通过设置它的属性
1。当使用作为一个form字段,从<input>标记创建slider

    <input class="easyui-slider" value="12"  style="width:300px"  
                 data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]" />

2. 从div标签创建

    <div class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"></div>

3. 通过脚本创建

    <div id="ss" style="height:200px"></div>   
     $('#ss').slider({   
	    mode: 'v',   
	    tipFormatter: function(value){   
		return value + '%';   
	    }   
     });