How can I modify my inline editor
How can I modify my inline editor
rain.yu
Posts: 1Questions: 1Answers: 0
I just recently learned MVC architecture programming.
The original Inline editor is as follows, and I want to change it to datatables
Although there is a download example, there is still no way to modify it correctly
Original：
javascript：
$('.edit').click(function () {
// Get cell data
var cell = $(this);
var value = cell.text().trim();
var field = cell.data('field');
var id = cell.data('id');
// Convert cell to input field
cell.html('<input type=text value=' + value + '>');
// Focus on the input field
cell.find('input').focus();
// Handle input field blur event
cell.find('input').blur(function () {
// Get new value
var newValue = $(this).val();
// Update cell with new value
cell.text(newValue);
// Call controller action to update data
updateData(id, field, newValue);
});
cell.find('input').keypress(function (e) {
if (e.which === 13) {
cell.find('input').blur(); // Trigger blur event
}
});
});
function updateData(id, field, value) {
$.ajax({
url: '/PoManage/EditPoSign',
type: 'POST',
data: { rid: id, field: field, value: value },
success: function () {
// Data updated successfully
location.reload(); // Refresh the page
},
error: function () {
// Error occurred while updating data
}
});
}
Controller：
[HttpPost]
public IActionResult EditPoSign(string rid, string field, string value)
{
DBManager dbmanager = new DBManager();
dbmanager.UpdatePoSign(rid, field, value);
return RedirectToAction("Index");
}
dbmanager：
public void UpdatePoSign(string rid, string field, string value)
{
using (SqlConnection sqlConnection = new SqlConnection(ConnStr))
{
sqlConnection.Open();
using (SqlCommand sqlCommand = new SqlCommand($"UPDATE Po_sign SET {field} = @value WHERE rid = @rid", sqlConnection))
{
sqlCommand.Parameters.AddWithValue("@value", value);
sqlCommand.Parameters.AddWithValue("@rid", rid);
sqlCommand.ExecuteNonQuery();
}
}
}
After the modification is as follows：
Then I wanted to know by the way, what I filled in
DBTYPE, DBCONNECTION, datatables_demo
is it right or not?
<table id="scrollSignTable" class="display" cellspacing="0">
<thead>
<tr>
<th>UID</th>
<th>Sign Name</th>
<th>Stage</th>
<th>Price</th>
<th>CName</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach (Po_sign posign in ViewBag.posigns)
{
<tr>
<td class="edit" data-field="uid" data-id="@posign.rid">@posign.uid</td>
<td class="edit" data-field="signname" data-id="@posign.rid">@posign.signname</td>
<td class="edit" data-field="stage" data-id="@posign.rid">@posign.stage</td>
<td class="edit" data-field="price" data-id="@posign.rid">@posign.price</td>
<td class="edit" data-field="cname" data-id="@posign.rid">@posign.cname</td>
<td>
@Html.ActionLink("Delete", "DeletePoSign", new { rid = posign.rid })
</td>
</tr>
}
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/keytable/2.10.0/js/dataTables.keyTable.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.5.1/js/dataTables.dateTime.min.js"></script>
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<script>
$(document).ready(function () {
function optimizeTable(tableId) {
const editor = new DataTable.Editor({
ajax: 'api/sign',
fields: [
{ label: 'UID:', name: 'uid' },
{ label: 'Sign Name:', name: 'signname' },
{ label: 'Stage:', name: 'stage' },
{ label: 'Price:', name: 'price' },
{ label: 'CName:', name: 'cname' }
],
table: '#' + tableId,
formOptions: {
inline: {
onBlur: 'submit'
}
}
});
const table = new DataTable('#' + tableId, {
paging: false,
searching: false,
scrollCollapse: true,
scrollY: '400px',
dom: 'Bfrtip',
keys: {
columns: ':not(:first-child)',
keys: [9],
editor: editor,
editOnFocus: true
},
order: [1, 'asc'],
select: {
selector: 'td:first-child',
style: 'os'
}
});
}
optimizeTable('scrollProcessTable');
optimizeTable('scrollSignTable');
Controller：
public class signController : Controller
{
[Route("api/sign")]
[HttpGet]
[HttpPost]
public ActionResult Sign()
{
var dbType = Environment.GetEnvironmentVariable("MSSQL");
var dbConnection = Environment.GetEnvironmentVariable("Data Source=192.....;Initial Catalog=flowring;User ID=sa;Password=sa;TrustServerCertificate=True;");
using (var db = new Database(dbType, dbConnection))
{
var response = new Editor(db," select p.rid, p.uid, p.signname, p.stage, p.price, p.cname, m.resign from po_sign p left join mem_geninf m on p.signname = m.loginid where m.resign = 'false'")
.Model<Po_sign>()
.Field(new Field("rid")
.Validator(Validation.NotEmpty())
).Field(new Field("uid")
.Validator(Validation.Numeric())
.SetFormatter(Format.IfEmpty(null))
)
.Field(new Field("signname"))
.Field(new Field("extn")
.Validator(Validation.Numeric())
)
.Field(new Field("stage")
.Validator(Validation.Numeric())
.SetFormatter(Format.IfEmpty(null))
)
.Field(new Field("price")
.Validator(Validation.Numeric())
.SetFormatter(Format.IfEmpty(null))
)
.Field(new Field("cname")
.Validator(Validation.Numeric())
.SetFormatter(Format.IfEmpty(null))
)
.TryCatch(false)
.Process(Request)
.Data();
return Json(response);
}
}
}
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide. (note: three backticks are needed)
Answers
That should be
sqlserveras the value. The valid options are available here.with throw an error as you can't "hotlink" the source from our site. You need to download the trial from the download page and host the Editor JS file on your server.
The second parameter should be the table name you want to select from -
po_signin this case. Editor will build the full SQL select statement from that and the fields.To add a left join have a look at the documentation here.
I think with those points resolved you should be fairly close to having Editor running on your page.
Allan