easyui级联

原创 2016年08月30日 16:12:19


当‘设备类型选择‘其它’时,‘故障原因分析‘’和’维修方案’的检查项为‘其它’。

1.两个数据源分别是diags3和diags,diags为后台传过来的一串检查项,diags3为‘其它’
var diags3=[{'diag_item_num':'15','diag_item_name':'其他'}];
var totaldiags=diags3;
2.当‘设备类型’选择‘其它’时,清空‘’故障原因分析 ’和维修方案的数据
 
$('#trouble_device_type').combobox({
		valueField:'id',
		textField:'text',
		data : parent.dicData["trouble_device_type"],
		panelHeight : '85',
		onChange:function(value){
		//若选择'其他',清空故障原因分析和维修方案的数据
			if(value=='other'){
				$("#fail_reason").datagrid('loadData',{total:0,rows:[]});
				$("#fix_plan").datagrid('loadData',{total:0,rows:[]});
			}
		}
		
});

3.在datagrid的onBeforeEdit里根据条件判断来重新跟检查项赋值
reasonGrid = $('#fail_reason').edatagrid({
		//height: 200,
		singleSelect: true,
		//fit: true, 
		rownumbers: true,
		selectOnCheck: true,
		multiSort: true,
		idField: 'reason_id',
		url: '',
		pagination: false,
	    columns: [[
	    	{field: 'diag_item_name', title: '检查项', align: 'left', width: 120,
				editor:{
	                type:'combobox',
	                options:{
					    editable: false,
					    valueField:'diag_item_name',
					    textField:'diag_item_name',
					    <span style="color:#ff0000;">data:diags,</span>
					    onSelect: function(record){
	    		 			var index = reasonGrid.datagrid('getRowIndex', reasonGrid.datagrid('getSelected'));
	    		 			var curData = $('#fail_reason').datagrid('getData');
	    					var newdiag_item_name = record.diag_item_name;
                			for(var i=0;i<curData.rows.length;i++){
	                    		if(newdiag_item_name==curData.rows[i].diag_item_name){
	                    			$.messager.alert('警告','已选择当前检查项,不允许重复选择');
	                    			window.setTimeout(function(){
	                    					reasonGrid.datagrid('deleteRow',index+1);
									}, 100);				
									return false;
	                    		}
                			}
                			var row = $('#fail_reason').datagrid('getRows')[curReasonIndex];
	             			row.diag_item_num = record.diag_item_num;
					        //级联刷新
					        var ed = reasonGrid.datagrid('getEditor',{index:curReasonIndex,field:'reason_content'});
					        $(ed.target).combogrid('grid').datagrid('load', {diag_item_num: record.diag_item_num});
					    }
	                }
	            }
	        }, 
	    	{field: 'reason_content', title: '故障原因',align: 'left', width: 350,
				editor:{
	                type:'combogrid',
	                options:{
	                    panelWidth:450,
					    idField:'reason_content',
					    textField:'reason_content',
					    mode: 'remote', 
	                    url:'analysis/queryReasons.do',
	                    pagination : true,//是否分页  
	                    rownumbers:true,//序号  
	                    collapsible:false,//是否可折叠的  
	                    fit: true,//自动大小  
	                    pageSize: 20,//每页显示的记录条数,默认为10  
	                    pageList: [20,40,100],//可以设置每页记录条数的列表  
	                    columns:[[
	                        {field:'reason_content',title:'内容',width:260},
	                        {field:'select_times',title:'次数',width:60}
	                    ]],
						onSelect: function (rowIndex, rowData) {
	             			var row = $('#fail_reason').datagrid('getRows')[curReasonIndex];
	             			row.reason_id = rowData.reason_id;
	             			row.reason_content = rowData.reason_content;
	         			},

						onBeforeLoad:function(param){
							var row = $('#fail_reason').datagrid('getRows')[curReasonIndex];
							param.diag_item_num = row.diag_item_num;
						}
	                }
	            }
            },
			{field: 'is_valid', title: '是否有效', align: 'center', width: 60,
				formatter:function(value,row,index){
					for(var i=0;i<valids.length;i++){
						if(valids[i].id == value){
							return valids[i].text;
						}
					}
					return '';
				},
				editor:{
	                type:'combobox',
	                options:{
					    editable: false,
					    valueField:'id',
					    textField:'text',
					    data:valids
	                }
	            }
			}
	        ]],
		toolbar:[             //工具条  
                {text:"增加",iconCls:"icon-add",handler:function(){//回调函数  
                	//先结束其他行编辑
					var rows = reasonGrid.datagrid('getRows');
                	for(var i=0;i<rows.length;i++){
	                    reasonGrid.edatagrid('endEdit', i);
                	}
                    reasonGrid.datagrid('insertRow',{//如果处于未被点击状态,在第一行开启编辑  
                         index: 0,
                         row: {
                         	source_type:'manual'
                         }
                     });
                    reasonGrid.datagrid('beginEdit',0);//没有这行,即使开启了也不编辑
                    //var ed = reasonGrid.datagrid('getEditor',{index:0,field:'diag_item_name'});
                    //$(ed.target).combobox('loadData', diags);
                }},  
                {text:"删除",iconCls:"icon-remove",handler:function(){
                    var rows = reasonGrid.datagrid('getSelections');
                    var index = reasonGrid.datagrid('getRowIndex', reasonGrid.datagrid('getSelected'));
                    if(rows.length<=0)  
                    {
                        $.messager.alert('警告','您没有选择','error');  
                    }
                    else if(rows.length>1)  
                    {
                        $.messager.alert('警告','不支持批量删除','error');  
                    }
                    else if(rows[0].source_type=='auto')  
                    {
                        $.messager.alert('警告','不允许删除系统自动生成诊断项目','error');  
                    }
                    else
                    {
                        $.messager.confirm('确定','您确定要删除第'+(index+1)+'行吗',function(t){  
                            if(t){
                            	reasonGrid.datagrid('deleteRow',index);
                            } 
                        });
                    }
                }}
        ],
       <span style="color:#ff0000;"> onBeforeEdit</span>:function(index,row){
	        row.editing = true;
	        curReasonIndex = index;
	        $('#fail_reason').datagrid('refreshRow', index);
	        //根据'设备类型'给'检查项'动态赋值
			<span style="color:#ff0000;">var trouble_device_type = $("#trouble_device_type").combobox('getValue');//设备类型
			
			if(trouble_device_type=='other'){
				totaldiags=diags3;
			}else if(trouble_device_type=='video'){
				totaldiags=diags;
			}else{
				totaldiags=diags;
			}
			//获得datagrid'检查项'这一列的对象
			var fieldopts=$('#fail_reason').datagrid('getColumnOption',"diag_item_name");
			//重新定义这一列的editor
			fieldopts.editor={
	                type:'combobox',
	                options:{
					    editable: false,
					    valueField:'diag_item_name',
					    textField:'diag_item_name',
					    data:totaldiags,
					    onSelect: function(record){
	    		 			var index = reasonGrid.datagrid('getRowIndex', reasonGrid.datagrid('getSelected'));
	    		 			var curData = $('#fail_reason').datagrid('getData');
	    					var newdiag_item_name = record.diag_item_name;
                			for(var i=0;i<curData.rows.length;i++){
	                    		if(newdiag_item_name==curData.rows[i].diag_item_name){
	                    			$.messager.alert('警告','已选择当前检查项,不允许重复选择');
	                    			window.setTimeout(function(){
	                    					reasonGrid.datagrid('deleteRow',index+1);
									}, 100);				
									return false;
	                    		}
                			}
                			var row = $('#fail_reason').datagrid('getRows')[curReasonIndex];
	             			row.diag_item_num = record.diag_item_num;
					        //级联刷新
					        var ed = reasonGrid.datagrid('getEditor',{index:curReasonIndex,field:'reason_content'});
					        $(ed.target).combogrid('grid').datagrid('load', {diag_item_num: record.diag_item_num});
					    }
	                }
	            }</span>
	    },
	    onAfterEdit:function(index,row){
	        row.editing = false;
	        $('#fail_reason').datagrid('refreshRow', index);
	    },
	    onCancelEdit:function(index,row){
	        row.editing = false;
	        $('#fail_reason').datagrid('refreshRow', index);
	    },
	    onClick:function(index,row){
	        $('#fail_reason').datagrid('selectRow', index);
	    }
	});






jquery easyui 实现级联效果

之前在google上搜了一篇jqueryeasyui实现级联的代码,实现级联效果原始链接,但是写的不是很详细,经过一番思考后对其代码进行还原,以后遇到类似情况可参考实现级联效果,我对其部分代码进行了注...

【ITOO】---easyUI的Combobox实现级联查询

这个问题真的是困扰了我好久啊!查了好多的资料都没有解决!不过多亏了老盖的帮忙,换了一个方法终于解决了!下面就让我来还原一下当时的情况!     在做ITOO新生系统之初,我负责学生核对信息界面,有一...

easyui combobox 三级级联 input 两种实现

/** * @param 默认加载 省市 */ $(function(){ $("input[id^='area_']").css({"height":"39px","width":"250px...

Spring Struts2 EasyUI 实现全国省市二级级联下拉列表

package gov.gfmis.ecounter.server.bean; public class City { private String areaId; privat...

easyUi Tree的CheckBox级联选中问题

需求:子结点选中,父节点随之选中,父节点取消,子节点随之取消,但是加载的时候不进行级联加载 var data = [{ "id": 1, "te...

jQuery easyUI combobox下拉框 联动 级联

新做了一个下拉框联动的小功能,网上找的是省市级联,之前也套用了,这次是自定义的一个级联,相当于父子关系,有如下两张表: 表A: (分类表)(相当于主菜单) 表B: (目录表)(相当于子菜单) ...
  • nnn_net
  • nnn_net
  • 2016年08月17日 11:06
  • 8865

easyui下拉框动态级联加载

easyui的下拉框动态加载数据,高校中要根据首先查询所有学院,然后根据学院动态加载课程。下面看如何实现。 1.界面效果   2. html + js代码 学院名称: ...

checkbox控制Input是否可以用以及下拉框的级联——easyUI

实现的功能是:1、点击“是否替换”控制input(关联工序)是否可用, 2、点击机种后点击关联工程才会查询出数据(并且是根据机种的ID),关联工序是根据关联工程! 机种——>关联工程——>关联工序...

解决:easyui中的datagrid详情展开,combobox的级联操作,以及修复combobox总是显示value值的问题

先来看下效果 var comboboxData;//项目与部门 field内的combobox data var datagrid; $(function() { //输入url获得d...

EasyUI+Javascript+MVC 实现三级级联(一)

三级联动其实就是做了一个这样的事情,当我们触发这个事件时,紧接着下一个事件就能触发,在这个例子中拿下拉框讲一个三级联动的小实例。 效果图:      当我们选择学校名字的时候,点击学院的下拉框就会...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyui级联
举报原因:
原因补充:

(最多只允许输入30个字)