Easyui datagrid行內【添加】、【編輯】、【上移】、【下移】

清空原有數據

方法1：

  var item = $('#filegrid').datagrid('getRows');
            if (item) {
                for (var i = item.length - 1; i >= 0; i--) {
                    var index = $('#filegrid').datagrid('getRowIndex', item[i]);
                    $('#filegrid').datagrid('deleteRow', index);
                }
            }

方法2：(測試過)

$('#filegrid').datagrid('loadData', { total: 0, rows: [] });

解析：loadData：載入本地數據，舊記錄將被移除。

行點擊事件

 $('#tbList').datagrid({ onClickRow: function () {//代碼  } });

datagrip單擊行的時候，將單選按鈕設置為選中

<script type="text/javascript">
    var List = {};
    List.RadioFormatter = function (value, rec, index) {
        return "<input id='radio_id' name='radio_name' type='radio' value='" + rec.Id + "'/>";
    };

　$(document).ready(　function(){ //呈現列表數據
　　$('#tbList').datagrid({ onClickRow:
            function () {
                //單擊行的時候，將單選按鈕設置為選中
                var id = $('#tbList').datagrid("getSelected");
                $("input[name='name']").each(function () {
                    if ($(this).val() == id.Id) {
                        $(this).attr("checked", true);
                    }
                });
            }
        });
});
</script>
<table id="tbList" style="height: 300px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit"
         singleSelect="true" checkbox="true" idfield="Id" url="@Url.Action("ListData")">
            <thead>
                <tr>
                    <th field="Id" width="30" formatter="PickupList.RadioFormatter">
                    </th>
                </tr>
            </thead>
        </table>

單元格點擊

　　單元格內容進行格式化化時，希望進行點擊進行操作，如何獲取到數據？

　　方法1.先選中當前行，然后拿到本行的數據

　　2.直接綁定數據

　　方法1示例

　　

//datagrid字段            
{ field: 'OrderNo', title: '單號', width: 100, halign: 'center', align: 'center', formatter: formatterStart },

//格式化單元格
var formatterStart = function (value, row, index) {
                return "<a href='#' data-index='" + index + "' onclick='startOnRow(this)'>" + row.OrderNo + "</a>";
            };

//點擊事件            
function startOnRow(e) {
    var rowindex = $(e).data("index");
    if (rowindex != -1) {
        $('#ui_datagrid').datagrid('selectRow', rowindex);
        startTake();
    }
}
//公用方法
function startTake() {
    var rows = $("#ui_datagrid").datagrid("getChecked");
    if (rows.length < 1) {
        $.msg_show("提示", "請先勾選訂單");
        return;
    }
   //自己的業務代碼
}

 

table中td的時間格式問題

1.頁面

 <th field="Test" formatter="Common.TimeFormatter" width="50" ></th>

2.js

var Common = {
    //EasyUI用DataGrid用日期格式化
    TimeFormatter: function (value, rec, index) {
        if (value == undefined) {
            return "";
        }
        /*json格式時間轉js時間格式*/
        value = value.substr(1, value.length - 2);
        var obj = eval('(' + "{Date: new " + value + "}" + ')');
        var dateValue = obj["Date"];
        if (dateValue.getFullYear() < 1900) {
            return "";
        }
        var val = dateValue.format("yyyy-mm-dd HH:MM");//控制格式
        return val.substr(11, 5);
    }

};

table中td內容太長自動換行

　添加屬性　nowrap="false" 

   將nowrap: false這個屬性設置在table的屬性中，不要設置在字段的屬性中，字段可以設置寬度，這樣就可以做到當文字長度超過規定的寬度后自動換行了

行和復選框的分離

方法一：（1.3版本才能用）

checkOnSelect="false" selectOnCheck="false"

注意：當使用$("#tbList").datagrid("getSelections");時候，只有行被選中，才能取到該行。一般情況，選中行時候，行為黃色背景。

  eg.<table checkOnSelect="false"> </table>

var selected = $("#tbList").datagrid("getSelections");
        if (selected.length == 0) {
            alert("請選擇！");
            return;
        }

        var idString = "";
        $.each(selected, function (index, item) {
            idString += item.Id + ",";
        });