none
HTML составная форма или как вставить редактируемую таблицу в форму

    Question

  • Коллеги!

    Скорее нужен совет куда копать, чем ответ на столь неоднозначный вопрос.

    У меня есть необходимость в форму редактирования добавить список редактирования вложеных элементов.

    Использую библиотеку Teleric ASP.NET MVC, но это в данном вопросе не принципиально.

    Есть желание вставить таблицу с функцией Ajax-редактирования, как в примере на сайте

    Но тут возникает проблема. Когда для строки пользователь нажимает "Edit" создается отдельная форма.

    Поскольку таблица находиться внутри моей основной формы, то получается многократно озвученная проблема формы в форме и, соответсвенно, Submit для строки формы перстает работать.

    Вопрос в том, как бы это обойти? Может кто уже решал подобную проблему.

    Вынести талицу за пределы основной формы нельзя. Причина: В Форму вставил TabStrip и таблица находиться на второй вкладке, а первая и третяя содержат поля редактирования основной формы. И такая последовательность важно с точки зрения user friendly interface.


    • Changed type MrSena Friday, January 27, 2012 9:49 AM Однозначного ответа не будет, это очевидно :)
    • Edited by MrSena Saturday, January 28, 2012 10:48 PM
    • Changed type Abolmasov DmitryModerator Monday, January 30, 2012 9:05 AM
    Friday, January 27, 2012 9:39 AM

Answers

  • Спасибо за подробный пример. Но не совсем понял, как это поможет при работе конкретно с компонентом Telerik ASP.NET MVC Grid (Ajax Editing)? Я не анализировал какой он код генерирует в момент редактирования. Даже если жто сделать, то при обновлении компонента все может перестать работать, поскольку производитель компонента может что то поменть в реализации.

    Я пока копнул в сторону того, что создал две формы без кнопок Submit. Между ними вставил требуемый мне компонент.

    Кнопку Submit вынес за пределы обеих форм, а по нажатии ее вызываю функцию, которая отправляет данные обеих форм на сервер. При этом работа Грида остаеться абсолютно автономной и за пределами какой либо из форм.

    Такой вариант работает и пока не вызвал никаких побочных эфектов. Тестирую...

    Saturday, January 28, 2012 10:55 PM

All replies

  • > Есть делание вставить таблицу с функцией Ajax-редактирования [...] Submit для строки формы перстает работать. Вопрос в том, как бы это обойти?
     
     
      
    с помощью JQuery. примерно так:
      

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta http-equiv='X-UA-Compatible' content='IE=9' />
        <style type="text/css">
            td { border: 1px dotted red; }
            table, span { width: 100%; }
        </style>
        <script type="text/javascript" src='http://code.jquery.com/jquery-latest.js'></script>
        <script type="text/javascript">
            function response(d, status) {
                $('#res').html(status + ": " + d);
            }
            function clear(str) {
                return str.replace(/\x0A+/g, '').replace(/\s{2,}/g, ' ').replace(/^\s+|\s+$/g, "");
            }
            $(document).ready(function () {
                // поместить контент td в поле-редактор
                $('#tbl .editable').html(function (index, old) {
                    var ci = $(this).get(0).cellIndex;
                    var ri = $(this).parent().get(0).rowIndex;
                    return '<span contenteditable="true" id="ce'+ri+'_'+ci+'">'+clear(old)+'</span>';
                });
    
                var org = {};   // хранит оригинальный контент td
    
                // при фокусе поля сохранить его контент
                $('[contenteditable=true]').focus(function () {
                    var id = $(this).attr('id');
                    if ((id in org) == false)
                        org[id] = $(this).text();
                });
    
                // поставить фокус на первое поле
                $('#tbl .editable:first > span').focus();
    
                // отправить изменения
                $('#frm').submit(function () {
                    // найти изменения
                    var req = {};
                    for (var c in org) {
                        var txt = $('#' + c).text();
                        if (org[c] != txt)
                            req[c] = clear(txt);
                    }
                    // отправить изменения POST-запросом на url: /dif
                    jQuery.post("/dif/", req, response);
                    return false;  // остановить submit
                });
            });
        </script>
    </head>
    <body>
        <form method='post' action='' id='frm'>
            <table id='tbl'>
                <tr>
                    <td class='editable'>12</td>
                    <td class='editable'>34</td>
                </tr>
                <tr>
                    <td class='editable'>56</td>
                    <td class='editable'>78</td>
                </tr>
            </table>
            <br />
            <input type='submit' />
            <br />
            <div id='res'></div>
        </form>
    </body>
    </html>
    
    

     

    Saturday, January 28, 2012 7:32 PM
  • Спасибо за подробный пример. Но не совсем понял, как это поможет при работе конкретно с компонентом Telerik ASP.NET MVC Grid (Ajax Editing)? Я не анализировал какой он код генерирует в момент редактирования. Даже если жто сделать, то при обновлении компонента все может перестать работать, поскольку производитель компонента может что то поменть в реализации.

    Я пока копнул в сторону того, что создал две формы без кнопок Submit. Между ними вставил требуемый мне компонент.

    Кнопку Submit вынес за пределы обеих форм, а по нажатии ее вызываю функцию, которая отправляет данные обеих форм на сервер. При этом работа Грида остаеться абсолютно автономной и за пределами какой либо из форм.

    Такой вариант работает и пока не вызвал никаких побочных эфектов. Тестирую...

    Saturday, January 28, 2012 10:55 PM