datagrid开发实践(总结)(2)

$('#Detail').datagrid({ loadMsg: '@CommonResource.Processing', toolbar: '#tb', width: "100%", height: "100%", url: "@Url.Action("GetLines")", methord: 'post', rownumbers: true, autoRowHeight: false, fit: true, fitColumns: true, striped: true, singleSelect: true, collapsible: false, pagination: false, queryParams: { hid: $("#Hid").val() }, columns: [[ { field: 'Material_No', title: '物料号', width: 100, sortable: false }, { field: 'Description', title: '中文描述', width: 100, sortable: false }, { field: 'En_Description', title: '英文描述', width: 100, sortable: false }, { field: 'Unit', title: '单位', width: 100, sortable: false }, { field: 'Quantity', title: '工单数量', width: 100, sortable: false }, { field: 'Total_Actual_Send_Quantity', title: '已出货数量', width: 100, sortable: false }, { field: 'Remark', title: '备注', width: 100, sortable: false }, ]], rowStyler: function (index, row) { if (row.Quantity == 0) { return 'background-color:pink;color:blue;font-weight:bold;'; } }, });

b，列变色

$('#Detail').datagrid({ loadMsg: '@CommonResource.Processing', width: "100%", height: "100%", data: [], rownumbers: true, autoRowHeight: false, fit: true, fitColumns: true, striped: true, singleSelect: true, checkOnSelect: false, selectOnCheck: false, collapsible: false, pagination: false, queryParams: {}, columns: [[ { field: 'sel', checkbox: true }, { field: 'Material_No', title: '物料号', width: 80, sortable: false }, { field: 'Description', title: '中文描述', width: 80, sortable: false }, { field: 'Unit', title: '单位', width: 80, sortable: false }, { field: 'Quantity', title: '工单数量', width: 80, sortable: false }, { field: 'Total_Actual_Send_Quantity', title: '已出货数量', width: 80, sortable: false }, { field: 'Remain_Quantity', title: '剩余数量', width: 80, sortable: false }, { field: 'Actual_Send_Quantity', title: '本次出货', width: 80, sortable: false, editor: { type: 'numberbox', options: { required: true, min: 0 }, }, styler: function (value, row, index) { return 'background-color:#ecffff;'; }, }, { field: 'Remark', title: '备注', width: 80, sortable: false, editor: { type: 'textbox', options: { validType: 'length[1,20]' }, }, styler: function (value, row, index) { return 'background-color:#ecffff;'; }, }, ]],

4，为datagrid添加工具条

如下效果的工具条，是通过datagrid的 toolbar 属性来指定，要留意的是toolbar的控件名称需要加上#符号。

html代码：

<div> <a href='#'><i></i>&nbsp;&nbsp;查询条件</a> @Html.ToolButton(string.Format(@"<a href='#'><i></i>&nbsp;&nbsp;{0}</a>", @CommonResource.Add), ActionCode.Create) @Html.ToolButton(string.Format(@"<a href='#'><i></i>&nbsp;&nbsp;{0}</a>", @CommonResource.Edit), ActionCode.Edit) @Html.ToolButton(string.Format(@"<a data-content='Delete 1' href='#'><i></i>&nbsp;&nbsp;{0}</a>", @CommonResource.Delete), ActionCode.Delete) </div>

js代码：

 

5，做增，删，改操作

a,为datagrid增加一行

function addCallBack(data) { $('#List').datagrid('insertRow', { index: 0, row: data, }); layer.msg('@CommonResource.AddSuccess', { icon: 1, time: 1000 }); }

b,为datagrid编辑一行

function editCallBack(data) { var selectData = $('#List').datagrid('getSelected'); var selectIndex = $('#List').datagrid('getRowIndex', selectData); $('#List').datagrid('updateRow', { index: selectIndex, row: data, }); layer.msg('@CommonResource.ModifySuccess', { icon: 1, time: 1000 }); }

c,为datagrid删除一行

$("#btnLineDelete").click(function () { var row = $('#Detail').treegrid('getSelected'); if (row != null) { var rowIndex = $('#Detail').datagrid('getRowIndex', row); $('#Detail').datagrid('deleteRow', rowIndex); layer.msg('@CommonResource.DeleteSuccess', { icon: 1, time: 1000 }); } else { layer.msg('@CommonResource.Noselectedrecord', { icon: 2, time: 1000 }); } });

d,treegrid的操作方法略有区别，附上源码：