当前位置: 动力学知识库 > 问答 > 编程问答 >

jqgrid - Can JQuery mobile show single active row hit by navigation slider

问题描述:

Can jquery mobile support such feature:

let's say there is a grid like 2 rows x 2 columns, it is shown as:

<table>

<tr>

<th>ID</th>

<th>Name</th>

</tr>

<tr>

<td>ID1</td>

<td>Name1</td>

</tr>

<tr>

<td>ID2</td>

<td>Name2</td>

</tr>

</table>

ID, NAME

ID1, NAME#1

ID2, NAME2

, now I expect the grid is shown single row every time and there is a navigation slider to locate which row will be shown, i.e. let's move navigation slider to row 2, then row #2 will be shown in same effects as below codes (all columns are shown in rows):

<table>

<tr>

<td>ID :</td>

<td>ID1</td>

</tr>

<tr>

<td>Name :</td>

<td>Name#1</td>

</tr>

</table>

now for single row, it looks like:

ID: ID1

NAME: NAME1

, with a mobile device when user want to edit a row of a grid, the space is too small, I want to change to show selected row only and change layout of a record from landscape to portrait. After user finished editing, we can click another button to restore layout to HTML table style (multiple rows)

Have jQuery mobile provides such feature?

网友答案:

jQuery Mobile does not provide this functionality out-of-the-box. You would have to code it yourself. You might consider another option which is to add an edit button to each row of the table. Then when the user clicks the edit button, launch a jQM popup with the edit controls.

For each row in the table, add a cell with a button:

<tr>
    <td class="editBtn"><a href="#" class="ui-btn ui-icon-edit ui-btn-icon-notext ui-corner-all" data-rowid="1">No text</a>
    </td>
    <td>ID1</td>
    <td>Name1</td>
</tr>

Add your edit form to the page same level as (header, footer, content):

<div data-role="popup" id="popupEdit" data-theme="a" class="ui-corner-all" data-dismissible="false">
    <div class="ui-content">
        <p>You are editing the row with ID: <strong id="editRow"></strong>
        </p>
        <hr />
        <label for="txtID">ID:</label>
        <input type="text" name="txtID" id="txtID" value="" />
        <label for="txtName">Name:</label>
        <input type="text" name="txtName" id="txtName" value="" />
        <fieldset class="ui-grid-a">
            <div class="ui-block-a">
                <input type="button" value="OK" data-theme="b" class="popupbutton" />
            </div>
            <div class="ui-block-b">
                <input type="button" value="Cancel" data-theme="a" class="popupbutton" />
            </div>
        </fieldset>
    </div>
</div>

Add a click handler for the row edit button:

$("#MyTable .editBtn a").on("click", function () {
    //get row id
    var rowid = $(this).jqmData("rowid");
    $("#editRow").text(rowid);

    var $rowCells = $(this).closest("tr").find("td");
    var curID = $rowCells.eq(1).text();
    var curName = $rowCells.eq(2).text();
    $("#txtID").val(curID);
    $("#txtName").val(curName);

    $("#popupEdit").popup("open");
});

In my example, and getting a rowid from a data-attribute, and the current ID and Name from the other row cells. These values are transferred to the popup and then the popup is launched.

DEMO

NOTE: you need to add the code that actually save the values depending on your database/backend server/localstorage/etc.

分享给朋友:
您可能感兴趣的文章:
随机阅读: