easyui

一、datagride - combobox/numberspinner

1. html

<input id="status" class="easyui-combobox" prompt="全部" style="100px" editable="false" 
　　data-options="editable:false, valueField:'id', textField:'text'，required:false， events:{blur: fnKeyUp,keyup:fnKeyUp}">

2. js　　

$('#'+target).datagrid({
　　columns: [[
　　　　{ field: 'xx', title: '箱型',  100, editor: { type: 'combobox', 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　options: { required:true, data: data, valueField: "sizetype", textField: "sizetype" ,editable:false} 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　} 
　　　　},
　　　　{ field: 'xs', title: '箱数',  50, editor: { type: 'numberspinner', 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　options: { min:1, required:true } 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　} 
　　　　}
　　]]
});　　

二、datagride - textbox

1. html

<table id="dialog_tdh_fc_1" class="easyui-datagrid"   data-options="
		            	rownumbers:true,
		                singleSelect: false,
		                onClickRow: onClickRow,
		                onClickCell: onClickCell,
		                onEndEdit: onEndEdit,
		                onBeforeSelect:function(){return false;} // 单击不可选
		                "> 
        <thead>
           <th field="cm" data-options="fixWidth(0.14)">船名</th>
           <th field="hc" data-options="fixWidth(0.05)">航次</th>
           <th field="pre_tdh"  data-options="fixWidth(0.17)">托单号</th>     
           <th field="tdh"  data-options="fixWidth(0.17)"  editor="{type:'textbox',options:{required:true}}">提单号</th>    
        </thead>
</table>

2. js

columnsArr_1=[[
　　{field:'cm',title:'船名',fixWidth(0.14)},
　　{field:'hc',title:'航次',fixWidth(0.05)},
　　{field:'pre_tdh',title:'托单号',fixWidth(0.17)},
　　{field:'tdh',title:'提单号',fixWidth(0.17), editor: {　type:'textbox',
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　options:{required:true}
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}
　　}
]]

var editIndex = undefined;
	function endEditing(){
		if (editIndex == undefined){return true}
		if ($('#dialog_tdh_fc_1').datagrid('validateRow', editIndex)){
			$('#dialog_tdh_fc_1').datagrid('endEdit', editIndex);
			editIndex = undefined;
			return true;
		} else {
		    return false;
		}
	}
	
	function onClickRow(index, row){
		var ed = $('#dialog_tdh_fc_1').datagrid('getEditor', {index:index,field:'tdh'});
		var tag = ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target));
     	tag .focus();    
     	tag.bind("blur", function(e){
     		tag.val(fnKeyUp1(e.target.value));
        });    
     	tag.bind("keyup", function(e){
     		tag.val(fnKeyUp1(e.target.value));
        });
    }
    function onClickCell(index, field){
        if (editIndex != index){
            if (endEditing()){
                $('#dialog_tdh_fc_1').datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
                var ed = $('#dialog_tdh_fc_1').datagrid('getEditor', {index:index,field:field});
                if (ed){
                	var tag = ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target));
                	tag .focus();    
                	tag.bind("blur", function(e){
                		tag.val(fnKeyUp1(e.target.value));
                    });    
                	tag.bind("keyup", function(e){
                		tag.val(fnKeyUp1(e.target.value));
                    });
                	/*
                	if ($('#xsgsdm').html()=='SNK'){
                	//	var tdhVal = ed.target.textbox("getValue").replace(/^s*|s*$/g, '');
                		if (tdhVal==''){
                			ed.target.textbox('setValue','SNKO09A');//textbox赋值方法
                		//  $(ed.target).val(rowData.USERNAME);//text赋值方法
                			ed.target.next().addClass("textbox-invalid");
                		}
                	};
                	*/
                }
                editIndex = index;
            } else {
                setTimeout(function(){
                    $('#dialog_tdh_fc_1').datagrid('selectRow', editIndex);
                },0);
            }
        }
    }
    function onEndEdit(index, row){
        var ed = $(this).datagrid('getEditor', {
            index: index,
            field: 'tdh'
        });
        row.tdh = $(ed.target).textbox('getText');
        
    }
    function append(data){
        if (endEditing()){
            $('#dialog_tdh_fc_1').datagrid('appendRow',data);
            editIndex = $('#dialog_tdh_fc_1').datagrid('getRows').length-1;
            $('#dialog_tdh_fc_1').datagrid('selectRow', editIndex)
                    .datagrid('beginEdit', editIndex);
        }
    }
    function removeit(){
        if (editIndex == undefined){return}
        $('#dialog_tdh_fc_1').datagrid('cancelEdit', editIndex)
                .datagrid('deleteRow', editIndex);
        editIndex = undefined;
    }