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屋！