jquery-easyui学习(6)_comb

1.comb组件

*   comb组件是基于input和select组件的  注意：使用自定义下拉框不能通过标签的方式进行创建

<select id="cc"></select>
	<div id="sp">
		<div style="color:#99BBE8;background:#fafafa;padding:5px;">请选择图片.......</div>
		<div>
			<img src="images/001.jpg" value="001.jpg" text="图片1" ></img>
		</div>
		<div>
			<img src="images/002.jpg" value="002.jpg" text="图片2" ></img>
		</div>
		<div>
			<img src="images/003.jpg" value="003.jpg" text="图片3" ></img>
		</div>
		<div>
			<img src="images/004.jpg" value="004.jpg" text="图片4" ></img>
		</div>
		<div>
			<img src="images/005.jpg" value="005.jpg" text="图片5" ></img>
		</div>								
</div>

*   这就是自定义下拉框   所以不能通过标签的方式进行创建

$(function(){
	$('#cc').combo({
		required:true,
		editable:false ,
		width:255 ,
		panelHeight:300 
		});
		$('#sp').appendTo($('#cc').combo('panel'));
		$('#sp img').click(function(){
				var v = $(this).attr('value');
				var s = $(this).attr('text');
				$('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
			});
});

*   $('#sp img')  选择sp下的img标签
*   var v = $(this).val();   这里不能用val()方法  不是所有的标签都有val方法  有val方法的标签才能使用val()方法

*   $('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');  setValue相当于valueField setText相当于textField  hidePanel方法 隐藏

2.combobox组件

$('#sel_1').combobox({
		  onSelect:function(){
				var pid = $('#sel_1').combobox('getValue');
				$('#sel_2').combobox('setValue' , '');
				$('#sel_2').combobox('reload' , 'ProvinceServlet?method=getCity&pid='+pid);
				}
			});

*   这里每次选完，第二个必须要置"" 否则第二个选择框会出现id而不是text
3. 自动搜索

//自动搜索 
       $('#search').combobox({
		//data:[{id:1 ,val:'男'},{id:2 ,val:'女'}] ,
		  mode:'remote' ,
		  url:'UserServlet?method=searchName' ,
		  valueField:'id' ,
		  textField:'username' ,
		  delay:1000
				});

*   下拉选框 选择男还是女

*   自动搜索会把搜索的内容全部放到下拉选框下  根据输入条件匹配选项

String q = request.getParameter("q");
List<User> ulist = this.udao.searchByName(q.trim());

*   默认参数名是q

*   空指针异常  第一次访问的时候q为null  q.trim()空指针异常

4.combogrid

//combogrid实现 			
$('#cc').combogrid({
	panelWidth:450,
	idField:'id',
	textField:'salary',
	mode:'remote' ,
	url:'UserServlet?method=searchName',
	columns:[[
	{field:'username',title:'用户名',width:100},
	{field:'age',title:'年龄',width:50},
	{field:'sex',title:'性别',width:50 , formatter:function(value , record , index){
				if(value==1){
					 return '<span style=color:red;>男</span>';
				} else if(value ==2){
				return '<span style=color:green;>女</span>';
				}
				}
					},
	{field:'salary',title:'薪水',width:100}
			]]
				});

*   内容全部放到下拉选框下 不过显示的是表格

5.可编辑表格

*   editor 列属性 可编辑的  

    type：字符串，该编辑类型可以使用的类型有：text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。
    options：对象，object, 该编辑器属性对应于编辑类型。

{
		field:'sex' , 
		title:'性别' ,
		width:50 ,
		formatter:function(value , record , index){
		      if(value == 1){
			  return '<span style=color:red; >男</span>' ;
		     } else if( value == 2){
			  return '<span style=color:green; >女</span>' ; 
			}
		     } , 
		editor:{
			type:'combobox' ,
			options:{
			data:[{id:1 , val:'男'},{id:2 , val:'女'}] ,
			valueField:'id' , 
			textField:'val' ,
			required:true , 
			missingMessage:'性别必填!'
			}
			}
}

*   combobox属性 data 从本地取数据  url属性 从服务器上取数据

$.extend($.fn.datagrid.defaults.editors, {   
    datetimebox: {   
        init: function(container, options){   
            var box = $('<input />').appendTo(container);   
            box.datetimebox(options);
            return box;   
        },   
        getValue: function(target){   
            return $(target).datetimebox('getValue');   
        },   
        setValue: function(target, value){   
            $(target).datetimebox('setValue',value);
        },   
        resize: function(target, width){   
            var box = $(target);   
			box.datetimebox('resize' , width);
        } ,
        destroy:function(target){
        	$(target).datetimebox('destroy');
        }
    }   
});  

*   editor 不支持datetimebox  类型 所以要重写

*   var editing ; //判断用户是否处于编辑状态   刚定义 没有赋值 都是undefined

{
	text:'新增用户',
	iconCls:'icon-add' , 
	handler:function(){
	       if(editing == undefined){
			flag = 'add';
			//1 先取消所有的选中状态
			$('#t_user').datagrid('unselectAll');
			//2追加一行
			$('#t_user').datagrid('appendRow',{description:''});
			//3获取当前页的行号
			editing = $('#t_user').datagrid('getRows').length -1;
			//4开启编辑状态
			$('#t_user').datagrid('beginEdit', editing);
			}
		}
}

*   getRows  返回当前页的所有行。

*   beginEdit  开始编辑行。

*   appendRow   追加一个新行。新行将被添加到最后的位置。  由于description一定会返回value 新增加的行description的值为undefined  所以要把description置为空串  

     但是这里不置为空串也可以 可能是浏览器的原因吧 

{
	text:'修改用户',
	iconCls:'icon-edit' , 
	handler:function(){
		var arr = $('#t_user').datagrid('getSelections');
		if(arr.length != 1){
			$.messager.show({
				title:'提示信息',
				msg:'只能选择一条记录进行修改!' 
					});
				   } else {
				       if(editing == undefined){
						flag = 'edit';
														
						//根据行记录对象获取该行的索引位置
						editing = $('#t_user').datagrid('getRowIndex' , arr[0]);
						//开启编辑状态
						$('#t_user').datagrid('beginEdit',editing);
								}
					   }
												
					}										
}

*   getRowIndex  参数为row  返回指定行的索引号，该行的参数可以是一行记录或一个ID字段值。

{
		text:'保存用户',
		iconCls:'icon-save' , 
		handler:function(){
			//保存之前进行数据的校验 , 然后结束编辑并师傅编辑状态字段 
			if($('#t_user').datagrid('validateRow',editing)){
					$('#t_user').datagrid('endEdit', editing);
					editing = undefined;
					$('#t_user').datagrid('reload');
									}
				  }
}

*   validateRow   验证指定的行，当验证有效的时候返回true。

{
		text:'取消操作',
		iconCls:'icon-cancel' , 
		handler:function(){
			//回滚数据 
		        $('#t_user').datagrid('rejectChanges');
			editing = undefined;
				  }
}	

*   rejectChanges   回滚所有从创建或者上一次调用acceptChanges函数后更改的数据。
*    保存完一定要把 editing  置为undefined    重新加载数据表格 不然  点击取消操作  添加 修改的 内容  显示时都会还原

$.messager.confirm('提示信息' , '确认删除?' , function(r){

选 否   return;  什么都不做