jQuery EasyUI Data Grid - operação da coluna
Neste tutorial, você vai aprender a incluir uma coluna na operação da grade de dados editável (datagrid) em. Uma coluna operacional tipicamente contém os valores de um ou mais colunas outra operação.
Primeiro, crie uma grade de dados editável (datagrid). Aqui criamos alguma coluna editável, 'ListPrice', 'valor' e a coluna "unitcost 'definido como numberbox editar tipo. coluna de operação é campo 'unitcost', será o resultado da multiplicação da coluna montante ListPrice.
<Table id = "tt" style = "width: 600px; height: auto" title = "editável DataGrid com coluna calculada" iconCls = "icon-editar" singleSelect = "true" IDField = "itemid" url = "Dados / datagrid_data.json"> <Thead> <Tr> <Field Th = "ItemId" width = "80"> Item ID </ th> <Th campo = "ListPrice" width = "80" align = "right" editor = "{type: 'numberbox', opções: {precisão: 1}}"> Listar preço </ th> <Th field = "quantidade" width = "80" align = "right" editor = "{type: 'numberbox', opções: {precisão: 0}}"> Montante </ th> <Field Th = "unitcost" width = "80" align = "right" editor = "numberbox"> Custo Unitário </ th> <Th campo = "attr1" width = "150" editor = "text"> Atributo </ th> <Th campo = largura "status" = "60" align = editor "centro" = "{type: 'caixa', opções: {on: 'P', off: ''}}"> Estado </ th> </ Tr> </ Thead> </ Table>
Quando o usuário clica em uma linha, nós começamos uma ação de edição.
var lastIndex; $ ( "# Tt '). Datagrid ({ onClickRow: function (rowIndex) { Se (lastIndex! = rowIndex) { $ ( "# Tt ') datagrid (' EndEdit", lastIndex) .; $ ( "# Tt ') datagrid (' BeginEdit ', rowIndex) .; setEditing (rowIndex); } lastIndex = rowIndex; } });
Para criar uma relação entre a operação de algumas colunas, devemos obter os editores atuais e ligá-los a alguns dos eventos acima.
setEditing função (rowIndex) { var editores = $ ( "# tt ') datagrid (' getEditors ', rowIndex) .; var priceEditor = editores [0]; var amountEditor = editores [1]; var costEditor = [2] editores; priceEditor.target.bind ( "mudança", function () { calcular (); }); amountEditor.target.bind ( "mudança", function () { calcular (); }); Calcular function () { var custo = priceEditor.target.val () * amountEditor.target.val (); $ (CostEditor.target) .numberbox ( 'setValue', custo); } }