easyUI下拉框的联动

一、jQuery的下拉框的联动那就简单了,今天来说一下easyUI的

//首先定义两个js函数
 var editIndex = undefined;
    function onClickRow(index){
        if (editIndex != index){
            if (endEditing()){
                $('#datagrid').datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
                editIndex = index;
            } else {
                $('#datagrid').datagrid('selectRow', editIndex);
            }
        }
    }
    function endEditing(){
        if (editIndex == undefined){return true}
        if ($('#cbsk').datagrid('validateRow', editIndex)){
            var ed = $('#datagrid').datagrid('getEditor', {index:editIndex,field:'a'});
            var productname = $(ed.target).combobox('getText');
            $('#datagrid').datagrid('getRows')[editIndex]['amc'] = productname;
        $('#datagrid').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    //这里自己写一个触发的函数
 $('#datagrid').datagrid({
                border:true,
                rownumbers:true,
                fitColumns:true,
                singleSelect:true,
                method:'get',
                onClickRow: onClickRow,
                columns:[[ 
{
    field : 'a',
    title : 'title',
    width : 100,
    formatter:function(value,row){
        return row.amc;
    },
    editor : {
        type : 'combobox',
        options : {
        //这里从后台查找一级联动的值
            url :projectPath+'/action',
            valueField : 'adm',
            textField : 'amc',
            required:true ,   
            missingMessage:'必须选择一个!' ,  
            editable:false ,
            onSelect : function(data) {
                var row = $('#datagrid').datagrid('getSelected');
                var rowIndex = $('#datagrid').datagrid('getRowIndex',row);// 获取行号
                var thisTarget = $('#datagrid').datagrid('getEditor',
                        {
                             'index' : rowIndex,
                             'field' : 'a'
                         }).target;
                var target = $('#datagrid').datagrid('getEditor',
                                {
                                    'index' : rowIndex,
            //这里是要联动的第二个下拉框的与域名                     'field' : 'b'
                                }).target;
                target.combobox('clear'); // 清除原来的数据
                var url = projectPath+'/action/fghdsfhdh?adm='+data.adm;
                target.combobox('reload', url);// 联动下拉列表重载
        }
        }
    }
},{
    field : 'b',
    title : 'title',
    width : 100,
    formatter:function(value,row){
        return row.amc;
    },
    editor : {
        type : 'combobox',
        options : {
            valueField : 'bdm',
            textField : 'bmc', 
            editable:false  
        }
    }
}

当然后面可以增加“新增”、“保存”、删除、取消,,这个在easyUI官网上都有

你可能感兴趣的:(前端)