Jquery数据表?编辑... [英] Jquery Data Table ? editing...
问题描述
嗨朋友们
当我编辑Jquery Datatable时,我从列表中选择了一个列,所以现在编辑时我需要显示下拉列表,其中包含值,以便我可以选择并按回车。
我一直在使用JQUERY DATATABLES插件&可插入的插件等。下拉列表中的数据来自DB。
我试图通过从代码项目中删除文章来做但我正在动态地做。
我的链接: ASP.NET MVC可编辑表(jQuery DataTables和ASP.NET MVC集成 - 第二部分) [ ^ ]
所以我如何绑定下拉列表代替文本框默认出现?
我的代码:
$(文件).ready(function() {
$('#myDataTable')。dataTable({
bJQueryUI:true,
sPaginationType:full_numbers,
bProcessing:true,
//bServerSide:true,
aoColumns:[
{
sName:Lead_Id,
bSearchable:false,
bSortable:false,
fnRender:function(oObj){
return'< a href =\Home \\LeadWizardView \\' mode =hold/> }
},
{sName:Contact_Name},
{sName:Contact_Address},
{sName:Lead_Source},
{sName:Domain}
},
null,// null为只读列
{
indicator:'Saving ...',
工具提示:'点击选择城镇',//认为这是地址
loadtext:'loading ...',
类型:'select',
onblur:'submit ',
数据:{伦敦':'伦敦','利物浦':'利物浦','朴茨茅斯':'朴茨茅斯'}//这里是静态数据,让我在下拉时我点击列。如何动态地做
}
})。makeEditable({
sUpdateURL:/ Home / UpdateData,
sAddURL:/ Home / AddData,
sDeleteURL:/ Home / DeleteData,
sAddNewRowFormId:formAddNewLead,
sAddNewRowButtonId:btnAddNewLead,
sAddNewRowOkButtonId:btnAddNewLeadOk,
sAddNewRowCancelButtonId:btnAddNewLeadCancel,
sDeleteRowButtonId:btnDeleteLead,
});
< / script>
}
< div id =demo>
< h2>自定义< / h2>
< table id =myDataTableclass =display>
< thead>
< tr>
< th>详细信息< / th>
< th>联系人< / th>
< th>联系地址< / th>
< th> Lead Source< / th>
< th> Domain< / th>
< / tr>
< / thead>
< tbody>
@foreach(Model.Lead_complete_list中的var项目)
{
< tr id =@ item.Lead_Id>
< td> @ item.Lead_Id< / td>
< td> @ item.Contact_Name< / td>
< td> @ item.Contact_Address< / td>
< td> @ item.Lead_Source< / td>
< td> @ item.Domain< / td>
< / tr>
}
< / tbody>
< / table>
< / div>
(document).ready(function(){
( '#myDataTable')。dataTable({
bJQueryUI:true,
sPaginationType:full_numbers,
bProcessing:true,
//bServerSide :true,
aoColumns:[
{
sName:Lead_Id,
bSearchable:false,
bSortable :false,
fnRender:function(oObj){
return'< a href =\Home \\LeadWizardView \\'mode =按住/>}
},
{sName:Contact_Name},
{sName:Contact_Address},
{sName: Lead_Source},
{sName:Domain}
},
null,// null为只读列
{
indicator:'保存...',
工具提示:'点击选择城镇',//认为这是地址
loadtext:'loading ...',
类型:'select',
onblur:'submit',
数据:{'伦敦':'伦敦','利物浦':'利物浦','朴茨茅斯':'朴茨茅斯'}//这里是静态数据给出的当我点击列时,我在下拉列表中。如何动态地做
}
})。makeEditable({
sUpdateURL:/ Home / UpdateData,
sAddURL:/ Home / AddData,
sDeleteURL:/ Home / DeleteData,
sAddNewRowFormId:formAddNewLead,
sAddNewRowButtonId:btnAddNewLead,
sAddNewRowOkButtonId:btnAddNewLeadOk,
sAddNewRowCancelButtonId:btnAddNewLeadCancel,
sDeleteRowButtonId:btnDeleteLead,
});
< / script>
}
< div id =demo>
< h2>自定义< / h2>
< table id =myDataTableclass =display>
< thead>
< tr>
< th>详细信息< / th>
< th>联系人< / th>
< th>联系地址< / th>
< th> Lead Source< / th>
< th> Domain< / th>
< / tr>
< / thead>
< tbody>
@foreach(Model.Lead_complete_list中的var项目)
{
< tr id =@ item.Lead_Id>
< td> @ item.Lead_Id< / td>
< td> @ item.Contact_Name< / td>
< td> @ item.Contact_Address< / td>
< td> @ item.Lead_Source< / td>
< td> @ item.Domain< / td>
< / tr>
}
< / tbody>
< / table>
< / div>
创建下拉列表时,您使用的是Data =bla..bla ..
相反,你应该使用loadurl:'yourmethod retrew json data'
下面的简单示例..
*** JAVA脚本***
< script language = javascript type = 文本/ JavaScript的跨度>>
Hi friends
When i edit a Jquery Datatable , where there is a column which i created by selecting from dropdownlist and so now on time of editing i need to display dropdownlist with values in it so i can choose and press enter .
I been using JQUERY DATATABLES plugin & jeditable plugin and so on . The data in dropdown will be from DB .
I tried to do by fallowing article from code project but i am doing dynamically .
My link : ASP.NET MVC Editable Table (jQuery DataTables and ASP.NET MVC integration - Part II)[^]
So how i can bind a dropdown in place of textbox which is coming by default ?
My code :
$(document).ready(function () { $('#myDataTable').dataTable({ "bJQueryUI": true, "sPaginationType": "full_numbers", "bProcessing": true, //"bServerSide": true, "aoColumns": [ { "sName": "Lead_Id", "bSearchable": false, "bSortable": false, "fnRender": function (oObj) { return '<a href="\"Home\\LeadWizardView\\'" mode="hold" /> } }, { "sName": "Contact_Name" }, { "sName": "Contact_Address" }, { "sName": "Lead_Source" }, { "sName": "Domain" } }, null, //null for read-only columns { indicator: 'Saving...', tooltip: 'Click to select town', // think this as address loadtext: 'loading...', type: 'select', onblur: 'submit', data: "{'London':'London','Liverpool':'Liverpool','Portsmouth':'Portsmouth'}" // here it is static data which gives me on drop-down when i click on column . how to do it dynamically } }).makeEditable({ sUpdateURL: "/Home/UpdateData", sAddURL: "/Home/AddData", sDeleteURL: "/Home/DeleteData", sAddNewRowFormId: "formAddNewLead", sAddNewRowButtonId: "btnAddNewLead", sAddNewRowOkButtonId: "btnAddNewLeadOk", sAddNewRowCancelButtonId: "btnAddNewLeadCancel", sDeleteRowButtonId: "btnDeleteLead", }); </script> } <div id="demo"> <h2>Customization</h2> <table id="myDataTable" class="display"> <thead> <tr> <th>Details</th> <th>Contact Person</th> <th>Contact Address</th> <th>Lead Source</th> <th>Domain</th> </tr> </thead> <tbody> @foreach (var item in Model.Lead_complete_list) { <tr id="@item.Lead_Id"> <td>@item.Lead_Id</td> <td>@item.Contact_Name</td> <td>@item.Contact_Address</td> <td>@item.Lead_Source</td> <td>@item.Domain</td> </tr> } </tbody> </table> </div>
(document).ready(function () {
('#myDataTable').dataTable({ "bJQueryUI": true, "sPaginationType": "full_numbers", "bProcessing": true, //"bServerSide": true, "aoColumns": [ { "sName": "Lead_Id", "bSearchable": false, "bSortable": false, "fnRender": function (oObj) { return '<a href="\"Home\\LeadWizardView\\'" mode="hold" /> } }, { "sName": "Contact_Name" }, { "sName": "Contact_Address" }, { "sName": "Lead_Source" }, { "sName": "Domain" } }, null, //null for read-only columns { indicator: 'Saving...', tooltip: 'Click to select town', // think this as address loadtext: 'loading...', type: 'select', onblur: 'submit', data: "{'London':'London','Liverpool':'Liverpool','Portsmouth':'Portsmouth'}" // here it is static data which gives me on drop-down when i click on column . how to do it dynamically } }).makeEditable({ sUpdateURL: "/Home/UpdateData", sAddURL: "/Home/AddData", sDeleteURL: "/Home/DeleteData", sAddNewRowFormId: "formAddNewLead", sAddNewRowButtonId: "btnAddNewLead", sAddNewRowOkButtonId: "btnAddNewLeadOk", sAddNewRowCancelButtonId: "btnAddNewLeadCancel", sDeleteRowButtonId: "btnDeleteLead", }); </script> } <div id="demo"> <h2>Customization</h2> <table id="myDataTable" class="display"> <thead> <tr> <th>Details</th> <th>Contact Person</th> <th>Contact Address</th> <th>Lead Source</th> <th>Domain</th> </tr> </thead> <tbody> @foreach (var item in Model.Lead_complete_list) { <tr id="@item.Lead_Id"> <td>@item.Lead_Id</td> <td>@item.Contact_Name</td> <td>@item.Contact_Address</td> <td>@item.Lead_Source</td> <td>@item.Domain</td> </tr> } </tbody> </table> </div>
When creating the dropdown you are using Data ="bla..bla.."
Instead you should use loadurl: 'yourmethod which returs json data'
quick example below..
***JAVA script ***
<script language="javascript" type="text/javascript">
这篇关于Jquery数据表?编辑...的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!