datagrid的getRows取值问题 关键是必须先结束编辑

其他 2018-07-02 12:29:43 阅读次数: 0 
<#include "/common/head.html"/>

<div id="tspaceHeadTable" class="easyui-layout add_content" data-options="fit:true, border:false">
    <div data-options="region:'north', border:false" style="height: 72px;">
        <form id="ff" method="post" style="background: #449d44;border: #3d5266">
            <table cellpadding="5" width="100%">
                <tr>
                    <th>表单名称:</th>
                    <td><input class="easyui-textbox" type="text" name="form_name" value="${model.form_name}" data-options="required:true" style="width: 120px;"></input></td>
                    <th>数据表名称:</th>
                    <td><input class="easyui-textbox" type="text" name="table_name" value="${model.table_name}" data-options="required:true" style="width: 120px;"></input></td>
                    <th>主键:</th>
                    <td><input class="easyui-textbox" type="text" name="id_field" value="${model.id_field}" data-options="required:true" style="width: 120px;"></input></td>
                </tr>
                <tr>
                    <th>弹窗大小:</th>
                    <td>
                        <input name="dialog_size" value="${model.dialog_size}" class="easyui-combobox" data-options="
                      valueField: 'id',
                    textField: 'text',
                      data:[
                         {id:'400x300', text:'400x300'},
                         {id:'600x400', text:'600x400'},
                         {id:'700x500', text:'700x500'},
                         {id:'800x600', text:'800x600'}
                         ]
                      " style="width: 120px;"/>
                    </td>
                    <th></th>
                    <td></td>
                    <th></th>
                    <td></td>
                </tr>
            </table>
        </form>
    </div>
    <div data-options="region:'center', border:false" style="border-top-width: 1px;">
        <table id="dg" class="easyui-datagrid"
               data-options="
                       fit:true,
                       rownumbers:true,
                        border: false,
                        toolbar: '#tb',
                        url: 'listField?head_id=${model.id}',
                        method: 'get',
                        onClickCell: onClickCell,
                        onLoadSuccess: function(data) {
                           if(data.total < 20) {
                              setTimeout(function(){
                                   for(var i = 0; i < data.rows.length; i++) {
                                       $('#dg').datagrid('beginEdit', i);
                                   }
                               }, 200);
                           }else {
                              showMsg('字段数量超出了我的想象，默认不打开编辑模式！');
                           }
                        }
                    ">
            <thead>
            <tr>
                <th data-options="field:'id', checkbox:true"></th>
                <th data-options="field:'field_name',width:100,editor:'textbox'">字段名称</th>
                <th data-options="field:'column_name',width:120,editor:'textbox'">列表列名</th>
                <th data-options="field:'input_type',width:90,
                              editor:{
                                    type:'combobox',
                                    options:{
                                        valueField:'value',
                                        textField:'text',
                                        data: [{value:'easyui-textbox', text:'textbox'}
                                              , {value:'easyui-combobox', text:'combobox'}
                                              ,{value:'easyui-datebox', text:'datebox'}
                                              ,{value:'easyui-datetimebox', text:'datetimebox'}
                                              ,{value:'textarea', text:'textarea'}
                                              ,{value:'easyui-numberspinner', text:'numberspinner'}
                                              ,{value:'easyui-filebox_img', text:'file(图片)'}
                                             ],
                                        required:true
                                    }
                                }">控件类型</th>
                <th data-options="field:'is_show_list',width:60,hidden:true,editor:{type:'checkbox'}">列表显示</th>
                <th data-options="field:'is_allow_detail',width:60,hidden:true,editor:{type:'checkbox'}">详情显示</th>
                <th data-options="field:'is_allow_update',width:60,hidden:true,editor:{type:'checkbox'}">允许编辑</th>
                <th data-options="field:'is_allow_add',width:60,hidden:true,editor:{type:'checkbox'}">允许增加</th>
                <th data-options="field:'is_search',width:60,hidden:true,editor:{type:'checkbox'}">是否搜索</th>
                <th data-options="field:'search_type',width:60,hidden:true,
                                editor:{
                                    type:'combobox',
                                    options:{
                                        valueField:'value',
                                        textField:'text',
                                        data: [{value:1, text:'值'}, {value:'2', text:'范围'}],
                                        required:false
                                    }
                                }">搜索类型</th>
                <th data-options="field:'is_sum',width:60,hidden:true,editor:{type:'checkbox'}">是否汇总</th>
                <th data-options="field:'is_allow_null',width:60,editor:{type:'checkbox',options:{align:'center'}}">允许为空</th>
                <th data-options="field:'column_length',width:40,editor:'textbox'">列宽</th>
                <th data-options="field:'dict_sql',width:100,editor:'textbox'">字典sql</th>
                <th data-options="field:'default_value',width:60,editor:'textbox'"><span class="symbol_var" title="支持变量">$</span>默认值</th>
                <th data-options="field:'order_num',width:50,align:'center',editor:'textbox'">顺序</th>
            </tr>
            </thead>
        </table>
        <div id="tb" style="height:auto">
            <a href="###" onclick="showHeadField(1)" class="easyui-linkbutton" data-options="toggle:true,group:'g1',selected:true" style="padding: 0px 4px;">数据</a>
            <a href="###" onclick="showHeadField(2)" class="easyui-linkbutton" data-options="toggle:true,group:'g1'" style="padding: 0px 4px;">页面</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">增加</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">删除</a>
        </div>
        <script type="text/javascript">
            var editIndex = undefined;
            function endEditing(){
                if (editIndex == undefined){return true}
                if ($('#dg').datagrid('validateRow', editIndex)){
                    $('#dg').datagrid('endEdit', editIndex);
                    editIndex = undefined;
                    return true;
                } else {
                    return false;
                }
            }

            //修改的方式是直接点击单元格，所以table要加上onClickCell属性，然后重写onClickCell方法
            function onClickCell(index, field){
                $('#dg').datagrid('selectRow', index).datagrid('beginEdit', index);return;
                if (editIndex != index){
                    if (endEditing()){
                        $('#dg').datagrid('selectRow', index)
                            .datagrid('beginEdit', index);
                        var ed = $('#dg').datagrid('getEditor', {index:index,field:field});
                        if (ed){
                            ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                        }
                        editIndex = index;
                    } else {
                        $('#dg').datagrid('selectRow', editIndex);
                    }
                }
            }

            //添加的方法 添加一行并设置为可编辑状态beginEdit，第二个参数根据行的顺序写入
            function append(){
                if (endEditing()){
                    // $('#dg').datagrid('appendRow',{is_show_list:1});
                    $('#dg').datagrid('appendRow',{
                        field_name:"",//字段名称
                        is_allow_null:"",//允许为空
                        column_length:"",//列宽
                        dict_sql:"",//字典sql
                        order_num:"",//顺序
                        default_value:"",//默认值

                        is_show_list:0,//列表显示
                        is_allow_detail:0,//详情显示
                        is_allow_update:0,//允许编辑
                        is_allow_add:0,//允许增加
                        is_search:0,//是否搜索
                        search_type:0,//搜索类型
                        is_sum:0,//是否汇总

                        column_name:""//列表列名
                    });
                    editIndex = $('#dg').datagrid('getRows').length-1;
                    $('#dg').datagrid('selectRow', editIndex)
                        .datagrid('beginEdit', editIndex);
                }
            }
            // 删除
            function removeit(){
                $.each($("#dg").datagrid("getSelections"), function(i, item) {
                    $('#dg').datagrid('deleteRow', $("#dg").datagrid("getRowIndex", item));
                });
                editIndex = undefined;
            }

            //保存方法（添加修改用了一个方法accept()）
            function accept(){
                //动态添加的行保存前必须要一定要结束编辑，循环结束所有行（关键）
                editIndex= $('#dg').datagrid('getRows').length;
                for(var i=0;i<editIndex;i++){
                    $('#dg').datagrid("endEdit",i);
                }
                if (endEditing()){
                    $('#dg').datagrid('acceptChanges');
                }
            }
            function reject(){
                $('#dg').datagrid('rejectChanges');
                editIndex = undefined;
            }
            function getChanges(){
                var rows = $('#dg').datagrid('getChanges');
                alert(rows.length+' rows are changed!');
            }
        </script>
    </div>
</div>
<script>
    top.window.subPage.save = save;
    //点击保存后触发的方法
    function save(successFunc) {

        //对上面的form表单进行校验
        if($("#tspaceHeadTable").form('validate')) {
        }
        //调用accept方法结束编辑并保存数据
        accept();
        //调用getParam方法获取最上面表单的信息
        var param = getParam();
        //获取所有行的信息转为json封装到param.rowsStr中，后台取值
        param.rowsStr = JSON.stringify($("#dg").datagrid("ows"));
        //调用update后台方法
        $.post("update", param, function(data) {
            if(successFunc) {
                successFunc();
            }
            top.window.closeWindow();
            top.window.subPage.loadCurrDatagrid();
        });
    }
    function getParam() {
        return {
            "model.id": ${model.id},
            "model.form_name": $(":input[name='form_name']").val(),
            "model.table_name": $(":input[name='table_name']").val(),
            "model.id_field": $(":input[name='id_field']").val(),
            "model.is_auto": $(":checked[name='is_auto']").val(),
            "model.dialog_size": $(":input[name='dialog_size']").val()
        }
    }
    function submitForm(){
        $('#ff').form('submit');
    }
    function clearForm(){
        $('#ff').form('clear');
    }

    var headFieldList = [
        {field:"field_name", type: 1},
        {field:"is_allow_null", type: 1},
        {field:"column_length", type: 1},
        {field:"dict_sql", type: 1},
        {field:"order_num", type: 1},
        {field:"default_value", type: 1},

        {field:"is_show_list", type: 2},
        {field:"is_allow_detail", type: 2},
        {field:"is_allow_update", type: 2},
        {field:"is_allow_add", type: 2},
        {field:"is_search", type: 2},
        {field:"search_type", type: 2},
        {field:"is_sum", type: 2}
    ];
    function showHeadField(type) {
        type = type || 1;
        var dg = $("#dg");
        $.each(headFieldList, function(i, item) {
            if(item.type == type) {
                dg.datagrid("showColumn", item.field);
            }else {
                dg.datagrid("hideColumn", item.field);
            }
        });
    }
</script>
<#include "/common/foot.html"/>

猜你喜欢

转载自blog.csdn.net/weixin_36810906/article/details/80731786
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022