EasyUI可编辑datagrid用combobox实现多级联动

<body>
    <script type="text/javascript">
    $(function(){
        var editing ; //判断用户是否处于编辑状态
        var flag  ;   //判断新增和修改方法
        $(‘#set_schedule‘).datagrid({
                    idField:‘id‘ ,
                    fitColumns: false  ,
                    url:‘scheduleAction_loadScheduleData.action?sureDocumentId=‘+$("#sureDocumentId").val() ,
                    striped: true ,
                    loadMsg: ‘数据正在加载,请耐心的等待...‘ ,
                    rownumbers:true ,
                    singleSelect : true,
                    frozenColumns:[[
                            {field:‘ck‘ , checkbox:true}
                    ]],
                    columns:[[
                        {
                            field:‘dateTime‘ ,
                            title:‘时间‘ ,
                            width:100 ,
                            align:‘center‘ ,
                            editor:{
                                type:‘datebox‘ ,
                                options:{
                                    required:true ,
                                    missingMessage:‘时间必填!‘ ,
                                    editable:false
                                }
                            }
                        },
                        {
                            field:‘morningTime‘ ,
                            title:‘上午上课时间段‘ ,
                            width:126 ,
                            align:‘center‘,
                            editor:{
                                type:‘validatebox‘ ,
                                options:{
                                    required:true ,
                                    missingMessage:‘时间段必填!‘
                                }
                            }
                        },
                        {
                            field:‘morningCourse‘ ,
                            title:‘上午课程‘ ,
                            width:100 ,
                            editor:{
                                type:‘validatebox‘ ,
                                options:{
                                    required:true ,
                                    missingMessage:‘课程必填!‘
                                }
                            }
                        },
                        {
                            field:‘aa1‘ ,
                            title:‘主讲老师分类‘ ,
                            width:100 ,
                            editor : {
                                type : ‘combobox‘,
                                options : {
                                    url:‘codeTypeAction_search.action?parentId=0&type=27‘,
                                    valueField:‘id‘ ,
                                    textField:‘name‘,
                                    onSelect:function(data){
                                        var row = $(‘#set_schedule‘).datagrid(‘getSelected‘);
                                        var rowIndex = $(‘#set_schedule‘).datagrid(‘getRowIndex‘,row);//获取行号
                                        var thisTarget = $(‘#set_schedule‘).datagrid(‘getEditor‘, {‘index‘:rowIndex,‘field‘:‘aa1‘}).target;
                                        var value = thisTarget.combobox(‘getValue‘);  

                                        var target = $(‘#set_schedule‘).datagrid(‘getEditor‘, {‘index‘:rowIndex,‘field‘:‘bb1‘}).target;
                                        target.combobox(‘clear‘); //清除原来的数据
                                        var url = ‘codeTypeAction_search.action?type=28&parentId=‘+value;
                                        target.combobox(‘reload‘, url);//联动下拉列表重载
                                    }
                                }
                            }
                        },
                        {
                            field:‘bb1‘ ,
                            title:‘主讲老师细类‘ ,
                            width:100 ,
                            editor : {
                                type : ‘combobox‘,
                                options : {
                                    url:‘codeTypeAction_search.action?type=28‘,
                                    valueField:‘id‘ ,
                                    textField:‘name‘,
                                    onSelect:function(data){
                                        var row = $(‘#set_schedule‘).datagrid(‘getSelected‘);
                                        var rowIndex = $(‘#set_schedule‘).datagrid(‘getRowIndex‘,row);//获取行号
                                        var thisTarget = $(‘#set_schedule‘).datagrid(‘getEditor‘, {‘index‘:rowIndex,‘field‘:‘bb1‘}).target;
                                        var value = thisTarget.combobox(‘getValue‘);  

                                        var target = $(‘#set_schedule‘).datagrid(‘getEditor‘, {‘index‘:rowIndex,‘field‘:‘morningTeacherId‘}).target;
                                        target.combobox(‘clear‘); //清除原来的数据
                                        var url = ‘teacherAction_search.action?teacherTypeId2=‘+value;
                                        target.combobox(‘reload‘, url);//联动下拉列表重载
                                    }
                                }
                            }
                        },
                        {
                            field:‘morningTeacherId‘ ,
                            title:‘主讲老师‘ ,
                            width:100 ,
                            editor : {
                                type : ‘combobox‘,
                                options : {
                                    url:‘teacherAction_search.action‘,
                                    valueField:‘id‘ ,
                                    textField:‘name‘
                                }
                            }
                        },
                        {
                            field:‘afternoonTime‘ ,
                            title:‘下午上课时间段‘ ,
                            width:126 ,
                            align:‘center‘ ,
                            editor:{
                                type:‘validatebox‘ ,
                                options:{
                                    required:true ,
                                    missingMessage:‘时间段必填!‘
                                }
                            }
                        },
                        {
                            field:‘afternoonCourse‘ ,
                            title:‘下午课程‘ ,
                            width:100  ,
                            editor:{
                                type:‘validatebox‘ ,
                                options:{
                                    required:true ,
                                    missingMessage:‘课程必填!‘
                                }
                            }
                        },
                        {
                            field:‘aa2‘ ,
                            title:‘主讲老师分类‘ ,
                            width:100 ,
                            editor : {
                                type : ‘combobox‘,
                                options : {
                                    url:‘codeTypeAction_search.action?parentId=0&type=27‘,
                                    valueField:‘id‘ ,
                                    textField:‘name‘,
                                    onSelect:function(data){
                                        var row = $(‘#set_schedule‘).datagrid(‘getSelected‘);
                                        var rowIndex = $(‘#set_schedule‘).datagrid(‘getRowIndex‘,row);//获取行号
                                        var thisTarget = $(‘#set_schedule‘).datagrid(‘getEditor‘, {‘index‘:rowIndex,‘field‘:‘aa2‘}).target;
                                        var value = thisTarget.combobox(‘getValue‘);  

                                        var target = $(‘#set_schedule‘).datagrid(‘getEditor‘, {‘index‘:rowIndex,‘field‘:‘bb2‘}).target;
                                        target.combobox(‘clear‘); //清除原来的数据
                                        var url = ‘codeTypeAction_search.action?type=28&parentId=‘+value;
                                        target.combobox(‘reload‘, url);//联动下拉列表重载
                                    }
                                }
                            }
                        },
                        {
                            field:‘bb2‘ ,
                            title:‘主讲老师细类‘ ,
                            width:100 ,
                            editor : {
                                type : ‘combobox‘,
                                options : {
                                    url:‘codeTypeAction_search.action?type=28‘,
                                    valueField:‘id‘ ,
                                    textField:‘name‘,
                                    onSelect:function(data){
                                        var row = $(‘#set_schedule‘).datagrid(‘getSelected‘);
                                        var rowIndex = $(‘#set_schedule‘).datagrid(‘getRowIndex‘,row);//获取行号
                                        var thisTarget = $(‘#set_schedule‘).datagrid(‘getEditor‘, {‘index‘:rowIndex,‘field‘:‘bb2‘}).target;
                                        var value = thisTarget.combobox(‘getValue‘);  

                                        var target = $(‘#set_schedule‘).datagrid(‘getEditor‘, {‘index‘:rowIndex,‘field‘:‘afternoonTeacherId‘}).target;
                                        target.combobox(‘clear‘); //清除原来的数据
                                        var url = ‘teacherAction_search.action?teacherTypeId2=‘+value;
                                        target.combobox(‘reload‘, url);//联动下拉列表重载
                                    }
                                }
                            }
                        },
                        {
                            field:‘afternoonTeacherId‘ ,
                            title:‘主讲老师‘ ,
                            width:100 ,
                            editor : {
                                type : ‘combobox‘,
                                options : {
                                    url:‘teacherAction_search.action‘,
                                    valueField:‘id‘ ,
                                    textField:‘name‘
                                }
                            }
                        },
                        {
                            field:‘eveningTime‘ ,
                            title:‘晚上上课时间段‘ ,
                            width:126 ,
                            align:‘center‘  ,
                            editor:{
                                type:‘validatebox‘ ,
                                options:{
                                    required:true ,
                                    missingMessage:‘时间段必填!‘
                                }
                            }
                        },
                        {
                            field:‘eveningCourse‘ ,
                            title:‘晚上课程‘ ,
                            width:100  ,
                            editor:{
                                type:‘validatebox‘ ,
                                options:{
                                    required:true ,
                                    missingMessage:‘课程必填!‘
                                }
                            }
                        },
                        {
                            field:‘aa3‘ ,
                            title:‘主讲老师分类‘ ,
                            width:100 ,
                            editor : {
                                type : ‘combobox‘,
                                options : {
                                    url:‘codeTypeAction_search.action?parentId=0&type=27‘,
                                    valueField:‘id‘ ,
                                    textField:‘name‘,
                                    onSelect:function(data){
                                        var row = $(‘#set_schedule‘).datagrid(‘getSelected‘);
                                        var rowIndex = $(‘#set_schedule‘).datagrid(‘getRowIndex‘,row);//获取行号
                                        var thisTarget = $(‘#set_schedule‘).datagrid(‘getEditor‘, {‘index‘:rowIndex,‘field‘:‘aa3‘}).target;
                                        var value = thisTarget.combobox(‘getValue‘);  

                                        var target = $(‘#set_schedule‘).datagrid(‘getEditor‘, {‘index‘:rowIndex,‘field‘:‘bb3‘}).target;
                                        target.combobox(‘clear‘); //清除原来的数据
                                        var url = ‘codeTypeAction_search.action?type=28&parentId=‘+value;
                                        target.combobox(‘reload‘, url);//联动下拉列表重载
                                    }
                                }
                            }
                        },
                        {
                            field:‘bb3‘ ,
                            title:‘主讲老师细类‘ ,
                            width:100 ,
                            editor : {
                                type : ‘combobox‘,
                                options : {
                                    url:‘codeTypeAction_search.action?type=28‘,
                                    valueField:‘id‘ ,
                                    textField:‘name‘,
                                    onSelect:function(data){
                                        var row = $(‘#set_schedule‘).datagrid(‘getSelected‘);
                                        var rowIndex = $(‘#set_schedule‘).datagrid(‘getRowIndex‘,row);//获取行号
                                        var thisTarget = $(‘#set_schedule‘).datagrid(‘getEditor‘, {‘index‘:rowIndex,‘field‘:‘bb3‘}).target;
                                        var value = thisTarget.combobox(‘getValue‘);  

                                        var target = $(‘#set_schedule‘).datagrid(‘getEditor‘, {‘index‘:rowIndex,‘field‘:‘eveningTeacherId‘}).target;
                                        target.combobox(‘clear‘); //清除原来的数据
                                        var url = ‘teacherAction_search.action?teacherTypeId2=‘+value;
                                        target.combobox(‘reload‘, url);//联动下拉列表重载
                                    }
                                }
                            }
                        },
                        {
                            field:‘eveningTeacherId‘ ,
                            title:‘主讲老师‘ ,
                            width:100 ,
                            editor : {
                                type : ‘combobox‘,
                                options : {
                                    url:‘teacherAction_search.action‘,
                                    valueField:‘id‘ ,
                                    textField:‘name‘
                                }
                            }
                        }
                    ]] ,
                    pagination: true ,
                    pageSize: 10 ,
                    pageList:[5,10,15,20,50] ,
                    toolbar:[
                        {
                            text:‘新增课程‘,
                            iconCls:‘icon-add‘ ,
                            handler:function(){
                                            if(editing == undefined){
                                                flag = ‘add‘;
                                                //1 先取消所有的选中状态
                                                $(‘#set_schedule‘).datagrid(‘unselectAll‘);
                                                //2追加一行
                                                $(‘#set_schedule‘).datagrid(‘appendRow‘,{description:‘‘});
                                                //3获取当前页的行号
                                                editing = $(‘#set_schedule‘).datagrid(‘getRows‘).length -1;
                                                //4选中并开启编辑状态
                                                $(‘#set_schedule‘).datagrid(‘selectRow‘,editing);
                                                $(‘#set_schedule‘).datagrid(‘beginEdit‘, editing);
                                            }
                                    }
                        }/* ,{
                            text:‘修改课程‘,
                            iconCls:‘icon-edit‘ ,
                            handler:function(){
                                    var arr = $(‘#set_schedule‘).datagrid(‘getSelections‘);
                                    if(arr.length != 1){
                                            $.messager.show({
                                                title:‘提示信息‘,
                                                msg:‘只能选择一条记录进行修改!‘
                                            });
                                    } else {
                                        if(editing == undefined){
                                            flag = ‘edit‘; 

                                            //根据行记录对象获取该行的索引位置
                                            editing = $(‘#set_schedule‘).datagrid(‘getRowIndex‘ , arr[0]);
                                            //开启编辑状态
                                            $(‘#set_schedule‘).datagrid(‘beginEdit‘,editing);
                                        }
                                    } 

                            }
                        } */,{
                            text:‘保存课程‘,
                            iconCls:‘icon-save‘ ,
                            handler:function(){
                                    //保存之前进行数据的校验 , 然后结束编辑并师傅编辑状态字段
                                    if($(‘#set_schedule‘).datagrid(‘validateRow‘,editing)){
                                            $(‘#set_schedule‘).datagrid(‘endEdit‘, editing);
                                            editing = undefined;
                                    }
                            }
                        },{
                            text:‘删除课程‘,
                            iconCls:‘icon-remove‘ ,
                            handler:function(){
                                var arr = $(‘#set_schedule‘).datagrid(‘getSelections‘);
                                if(arr.length <= 0 ){
                                    $.messager.show({
                                        title:‘提示信息‘,
                                        msg:‘请选择进行删除操作!‘
                                    });
                                } else {
                                    $.messager.confirm(‘提示信息‘ , ‘确认删除?‘ , function(r){
                                        if(r){
                                            var ids = ‘‘;
                                            for(var i = 0 ; i < arr.length ; i++){
                                                ids += arr[i].id + ‘,‘;
                                            }
                                            ids = ids.substring(0,ids.length-1);
                                            $.post(‘scheduleAction_delete.action‘ , {ids:ids},function(result){
                                                    $(‘#set_schedule‘).datagrid(‘reload‘);
                                                    $.messager.show({
                                                        title:‘提示信息‘,
                                                        msg:‘操作成功!‘
                                                    });
                                            });  

                                        } else {
                                             return ;
                                        }
                                    });
                                }
                            }
                        },{
                            text:‘取消操作‘,
                            iconCls:‘icon-cancel‘ ,
                            handler:function(){
                                //回滚数据
                                $(‘#set_schedule‘).datagrid(‘rejectChanges‘);
                                editing = undefined;
                            }
                        }
                    ] ,
                    onAfterEdit:function(index , record){
                        var data = $(‘#moduleform‘).serialize();
                        $.post(flag==‘add‘?‘scheduleAction_addSchedule.action?‘+data:‘scheduleAction_updateSchedule.action‘ , record , function(result){
                            var data = $.parseJSON(result);
                            $(‘#set_schedule‘).datagrid(‘reload‘);
                            $.messager.show({
                                    title:‘提示信息‘,
                                    msg:data.message
                                });
                        },‘text‘);
                    }  

            });  

    });  

    </script>
        <form id="moduleform" method="post">
            <s:hidden name="sureDocumentId" id="sureDocumentId"></s:hidden>
            <table  cellspacing="1" cellpadding="5" class="tb_background2" width="100%">
                <tr>
                    <td width="20%" class="td_right">总学时:</td>
                    <td width="28%" class="td_left">
                        <s:textfield name="totalLearnTime" id="totalLearnTime" size="32"/>学时
                    </td>
                    <td width="20%" class="td_right">是否可见:</td>
                    <td width="28%" class="td_left">
                        <s:select list="#{‘0‘:‘可见‘,‘1‘:‘不可见‘ }" cssStyle="width:200px;" name="type" id="type"></s:select>
                    </td>
                </tr>
            </table>
        </form>
        <table id="set_schedule"></table>
  </body>  
时间: 2024-10-11 08:58:10

EasyUI可编辑datagrid用combobox实现多级联动的相关文章

EasyUI 可以编辑datagrid

1.主要用到的技术:前端easyui,后台是Spring MVC,Spring data Jpa等. 2.效果展示 3.局部代码展示 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <%@ page contentType="text/html;charset=UTF-8&q

jQuery EasyUI教程之datagrid应用

三.设定或定制各种功能 1.增加分页 创建DataGrid数据表格 设置“url”属性,用来装入远端服务器数据,服务器返回JSON格式数据. Html代码代码   <table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="datagrid2_getdata.php" title="Load Data" ic

jQuery EasyUI API - Grid - DataGrid [原创汉化官方API]

jQuery EasyUI API - Grid - DataGrid [原创汉化官方API] 2014-04-02   DataGrid 继承自 $.fn.panel.defaults,覆盖默认值 $.fn.datagrid.defaults. DataGrid控件显示数据以表格的形式提供了丰富的选择,支持排序,组和编辑数据. DataGrid控件被设计来减少开发时间和要求开发商没有特定的知识.它是轻量级的和功能丰富的.合并单元格,多列标题,冻结列和页脚是仅有的几个特点. [依赖于] pane

easyui行编辑:利用append row添加行,直接在行中编辑,ajax提交保存

今天工作用到了easyui行编辑,在这里总结一下,不会的同学可以看看,顺便吐槽一下,网上的很多博客都是粘贴复制的,内容很乱 ,而且看不懂,不知道这些粘贴复制的怀的是什么心,不但没用,还影响别人搜索. 呼吁大家在写博客的时候认真一些,别只粘贴复制,至少可以自己运行好了贴上自己的代码和一点感想,对别人用处很大的. 好了,正题开始--> 我用的是easyui 1.4 效果如下: 点击添加按钮,在第二行的位置添加新行,点击单元格输入内容,点保存通过ajax提交. 修改则直接点击单元格修改,点保存提交.

Easy-UI 动态添加DataGrid的Toolbar按钮

在前人的基础上进行的修改,不知道他是从哪里引用来的,所以没有粘贴引用地址. 原代码不支持1.3.6. 修改功能: 1.如果之前没有添加过工具,用这个方法不能添加(已修复): 2.估计是不支持1.3.6,所以在1.3.6下不能删除按钮(已修复): 3.添加了在删除最有一个按钮后把按钮容器删除掉: 插件代码: $.extend($.fn.datagrid.methods, { addToolbarItem: function (jq, items) { return jq.each(function

简单的拼成一个内有datagrid的combobox

<Border Height="22" BorderBrush="DarkGray" BorderThickness="1"> <StackPanel Orientation="Horizontal"> <TextBlock x:Name="TesTextBox" Height="20" Width="154"/> <Butt

miniUI 可编辑datagrid获取值的问题

<div id="variableGrid" class="mini-datagrid" borderStyle="border-right:0px;border-top:0px;" style="height: auto;"> <div property="columns"> <div field="varCode" name="varCode&

jQuery EasyUI教程之datagrid应用(三)

今天继续之前的整理,上篇整理了datagrid的数据显示及其分页功能 获取数据库数据显示在datagrid中:jQuery EasyUI教程之datagrid应用(一) datagrid实现分页功能:jQuery EasyUI教程之datagrid应用(二) 接下来就是数据的增删改查了,首先我们在页面中添加功能按钮 这里很简单就是datagrid的toolbar属性 接下来我们实现按键的功能 查询比较麻烦我们最后写,先写添加吧,既然要添加,就应该有表格或是输入的文本框吧,还要进行提交,那就要有f

Flex4.6 DataGrid自定义ComboBox并获取自定义ComboBox的值

最近,项目需求需要在DataGrid上动态生成GridColumn以及设置其为ComboBox,默认是为TextInput. Flex 4.6使用s:DataGrid组件而不是mx:DataGrid,网上很多资料都是mx组件的,于是写了这篇文章. 首先,s:DataGrid的标题栏存储的对象是GridColumn. 标题栏动态添加函数 <span style="font-family:Microsoft YaHei;font-size:18px;"> var columns