Introducción a EasyUi
Easyi es una colección de complementos de interfaz de usuario basados en jQuery.
Easyi proporciona las características necesarias para crear aplicaciones modernas, interactivas y JavaScript.
Usando Easyi, no necesita escribir mucho código, solo necesita escribir algunas etiquetas HTML simples para definir la interfaz de usuario.
Easyi es un marco completo que admite perfectamente las páginas web HTML5.
Easyui le ahorra tiempo y escala de desarrollo web.
Easyui es simple pero poderoso.
Cuando lo estaba usando por primera vez, todavía tomé algunos desvíos en el método de referencia introducido en el foro y registré los problemas que encontré.
1. El nodo raíz debe definirse;
2. Se pueden usar uno o más nodos raíz;
4. El atributo del nodo principal del nodo raíz no necesita definirse, o se define como 0;
5. El nombre del atributo de nodo principal de los nodos infantiles en cada nivel debe ser "_parentid", y no se puede usar ningún otro nombre. Este nombre se ha definido en jQuery.easyui.js;
6. No hay necesidad de generar datos JSON en la estructura del "árbol" en la acción de fondo. Mientras se entregue el JSON de la siguiente estructura a la Grangrid en la recepción, puede crear una salida de árbol en la página. (También es una opción para generar el fondo en el formato de niños en forma de árbol).
{"total": 17, "filas": [{"id": 3, "GoodsId": 36120, "Qty": 2.0000, "REM": "15"}, {"Id": 4, "GoodsId": 36123, "Qty": 1.0000, "REM": "21"}, {"Id": 5, "GoodsId": 36124, "Qty": 2.0000, "REM": "23"}, {"id": 8, "GoodsId": 36130, "Cant.": 1.0000, "REM": "1"}, {"id": 9, "GoodsId": 36131, "Qty": 1.0 000, "Rem": "2"}, {"id": 10, "GoodsId": 36132, "Qty": 1.0000, "Rem": "3"}, {"id": 11, "GoodsId": 36133, "Qty": 1.0000, "Rem": "4"}, {"id": 12, "G Oodsid ": 36134," _ ParentId ": 8," Cantidad ": 1.0000," Rem ":" 1 "}, {" id ": 13," GoodsId ": 36135," _ ParentId ": 8," Qty ": 2.0000," REM ":" 2 "}, {" Id ": 14, 14, 14, "GoodsId": 36136, "_ ParentId": 8, "Cantidad": 1.0000, "Rem": "3"}, {"id": 15, "GoodsId": 36137, "_ ParentId": 8, "Qty": 1.0000, "REM": "4"}, "Id": 1 6, "GoodsId": 36138, "_ ParentId": 8, "Cantidad": 3.0000, "REM": "5"}, {"id": 17, "GoodsId": 36139, "_ ParentId": 8, "Qty": 1.0000, "Rem": "6"}, "Id" : 18, "GoodsId": 36142, "_ ParentId": 9, "Cantidad": 1.0000, "Rem": "1"}, {"id": 19, "GoodsId": 36143, "_ ParentId": 9, "Qty": 1.0000, "Rem": "2"}, {"I d ": 20," GoodsId ": 36144," _ ParentId ": 9," Cantidad ": 1.0000," REM ":" 3 "}, {" id ": 21," GoodsId ": 36145," _ ParentId ": 9," Qty ": 1.0000," Rem ":" 4 "}]}Esta es una acción
var pls = listAll (P.PartChild) .tolist (); list <sect> result = new List <Sect> (); foreach (var item en pls) {if (item.PartParent == p.partChild) {result.add (new {id = item.listid, GoodsID = item.partChild, qty = item.qty, rem = item.r}; Método de datos de árbol, redundante! Easyi puede crear automáticamente un árbol basado en ParentId // Object l = new {id = item.listid, text = item.partChild, _parentid = 0, qty = item.qty, rem = item.rem, chlidren = treelist (pls, item.partChild)}; // resultado.add (l);} más item.PartParentSelect a; result.add (nuevo {id = item.listid, GoodsID = item.partChild, _parentid = parent.first (). listid, qty = item.qty, rem = item.rem});}}Esta es la vista de recepción
<Div style = "margin: 20px 0;"> </div> <table style = "altura: 250px" data-options = "url: '/contosobisite/piezaslist/jlist/', método: 'get', nowrap: false, bownumers: true, animate: true, colaps: true, colaps: true: verdadero, fitcolumns: true: idfield: 'id' 'GoodsID' "> <TreeField: 'GoodsID'"> <TreeField: 'GoodsID' "> GoodsID </th> <th data-options =" campo: 'id' "> listid </th> <th data-options =" field: 'listver' "align =" right "> listver </th> <th data-options =" campo: 'parentname' "> data-options = "Field: 'Qty'"> Qty </th> <th data-options = "campo: 'rem'"> rem </th> <th data-options = "campo: '_ parentid'"> parent </th> </tr> </thead> </table>
Versión JS: jQuery.easyui-1.4.3.min.js; jQuery-1.11.3.min.js
El contenido anterior es las notas EasyUi TreeGrid compartidas por el editor. ¡Espero que sea útil para todos!