Title: datagrid with combobox and inline cell editing newbie question
Post by: ub2709 on March 28, 2023, 10:11:06 PM
Hi, since some days I sit here and have for me a big problem, because I am new with html, php and easyui datagrid, so I will post a piece of an example and I hope you can help me, because I donĀ“t find the answer how it works. I want to create a grid which load it contents from a database, this works.In the datagrid one column has to be a combobox. This comboxbox has also be filled out of a db and hast to be selected with the correponding item from the rest of the other data. This works not. And I dont know how to tell the datagrid that, if the user click into cell or becomes the focus, that editing start without pressing a edit button. Can you please!!! help me? I hope you understand my not so perfect english. Thanks a lot. Here now the code:
<div id="container" class="easyui-layout" fit="true"> <div region="center"> <table id="dgCustomers" toolbar="#toolbarCustomer" class="easyui-datagrid" fit="true" singleSelect="true" fitColumns="true" rowNumbers="false" pagination="true" url="<?= site_url('welcome/getcustomers') ?>" pageSize="25" pageList="[25,50,75,100,125,150,200]" nowrap="false"> <thead> <tr> <th field="customerNumber" width="80">Customer Number</th> <th field="customerName" width="100",editor:'text'>Name</th> <th field="contactFirstName" width="100">Contact First Name</th> <th field="contactLastName" width="100">Contact Last Name</th> <th field="phone" width="50",align:'right',editor:{type:'numberbox',options:{precision:1}}>Phone</th> <th field="addressLine1" width="100">First Address</th> <th field="addressLine2" width="100">Second Address</th> <th field="city" width="50">City</th> <th field="state" width="50,align:'center',editor:{type:'checkbox',options:on:'P',off:''}}">State</th> <th field="postalCode" width="50",align:'right',editor:'numberbox'>Postal Code</th> <th field="country" width="50">Country</th> </tr> </thead> </table> </div> </div>
Title: Re: datagrid with combobox and inline cell editing newbie question
Post by: jarry on March 29, 2023, 01:30:18 AM
Please try to use the Cell Editing extension. https://www.jeasyui.com/extension/datagrid_cellediting.php Here is the example using the 'combobox' editor. <!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title>Cell Editing in DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-cellediting.js"></script> <script type="text/javascript"> var data = [ { "productid": "FI-SW-01", "productname": "Koi", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" }, { "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" }, { "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr1": "Venomless", "itemid": "EST-11" }, { "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" }, { "productid": "RP-LI-02", "productname": "Iguana", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" }, { "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" }, { "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" }, { "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "Adult Female", "itemid": "EST-16" }, { "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" }, { "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" } ]; var comboData = [ { "productid": "FI-SW-01", "productname": "Koi" }, { "productid": "K9-DL-01", "productname": "Dalmation" }, { "productid": "RP-SN-01", "productname": "Rattlesnake" }, { "productid": "RP-LI-02", "productname": "Iguana" }, { "productid": "FL-DSH-01", "productname": "Manx" }, { "productid": "FL-DLH-02", "productname": "Persian" }, { "productid": "AV-CB-01", "productname": "Amazon Parrot" } ];
$(function () { $('#dg').datagrid({ data: data, fitColumns: true, columns: [[ { field: 'itemid', title: 'Item ID', width: 100 }, { field: 'productid', title: 'Product', width: 150, editor: { type: 'combobox', options: { data: comboData, valueField: 'productid', textField: 'productname' } } }, { field: 'listprice', title: 'List Price', width: 100, align: 'right', editor: { type: 'numberbox', options: { precision: 1 } } }, { field: 'unitcost', title: 'Unit Cost', width: 100, align: 'right', editor: 'numberbox' }, { field: 'attr1', title: 'Attribute', width: 250, editor: 'text' } ]] }).datagrid('enableCellEditing').datagrid('gotoCell', { index: 0, field: 'productid' }); }); </script> </head>
<body> <table id="dg" title="Cell Editing in DataGrid" style="width:700px;height:400px"></table> </body>
</html>
Title: Re: datagrid with combobox and inline cell editing newbie question
Post by: ub2709 on March 29, 2023, 06:06:49 AM
Thank you for your fast reply, now I understand. You make my day ;D
|