Continue with the last blog post , Tell me more about it js Code and JQuery DataTables Editor--- Page content modification && Database information modification problems and solutions .

1. About dialog

initialization :

 $("#e_Attributes").dialog({
modal: true,
autoOpen: false,
show: {
effect: "blind",
duration:
},
hide: {
effect: "explode",
duration:
},
width:
});

dialog At initialization time , To set up  modal by true, It's a cover , When dialog The pop-up box appears , You can only operate dialog What's in it . The advantage of this is that it only makes dialog once , It is convenient for the analysis of specific cases datatables The operation of .

close :

 function dialogClose() {
$("#e_Attributes").dialog("close");
}

When dialog Medium ajax When the asynchronous update is successful , Call the above code to close dialog.

2. About datatables

initialization :

 var editor;
// Statement datatable
$("#gridtable").dataTable().fnDestroy();
editor = $('#gridtable').dataTable({
"bInfo":false,
"bServerSide": false,
'bPaginate': false, // Pagination or not .
"bProcessing": false, // When datatable Whether to display the processing prompt information when getting data .
'bFilter': false, // Whether to use the built-in filtering function .
'bLengthChange': false, // Whether users are allowed to customize the number of items displayed on each page .
'sPaginationType': 'full_numbers', // Page style
});

First of all, I declare editor, stay datatables Initialization time is editor assignment , This is convenient for us to initialize the datatables operation .
     $("#gridtable").dataTable().fnDestroy(); This code , It will be stated earlier datatable destroy. Without this code , When the page refreshes , Will appear dataTable It has been stated that , No need to declare the wrong warning , This will not happen every time , The specific reason has not been found yet , But with this code , There is no such mistake .

dataTable You can set your own style .

3.datatables The operation of

Click on the selected line to change color and get the contents of the selected line :

 // single click , Value , Change the style 
$("#gridtable tbody tr").click(function (e) {
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
}
else {
editor.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
var aData = editor.fnGetData(this);
......// Get the value of the selected row , These values are in aData in , It's in the form of an array , You can manipulate this set of values
}
});

Click on a line , If this line has been selected , Then remove the style , If you don't choose , be  $(this).addClass('row_selected'), You can add the style you want .
    var aData = editor.fnGetData(this); You can get the value of the click line , In the above code, you get all the values of the newly selected line .

Double click the selected line to change color , Get the contents of the selected line and pop up dialog:

 // double-click 
$("#gridtable tbody tr").dblclick(function () {
if ($(this).hasClass('row_selected')) { }
else {
editor.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
} var aData = editor.fnGetData(this);
......// The data can be manipulated
$("#e_Attributes").dialog("open");// open dialog });

When you double-click, the color of the selected line changes and the content of the selected line is the same as when you click , But when you double-click, you add more editor.$('tr.row_selected').removeClass('row_selected') Code , Because the same datatables We set it as mutually exclusive , You can only select one row at a time , This code can remove the style of the previously selected line . After testing , We don't have to judge whether the line was selected or not , This code works well .
     Double click to open dialog, $("#e_Attributes").dialog("open") Used to open dialog.

Add operation :

 // add to 
$("#add").click(function () {
editor.$('tr.row_selected').removeClass('row_selected');
putNullValue();
$("#e_Attributes").dialog("open");
});

When you click add Button time , Remove the selected line style from the dialog box , Clear all the contents in the pop-up box , Finally open dialog.
      Edit operation :

 // edit 
$("#edit").click(function () {
var productAttributeID = $("#productAttributeID").val();
if (productAttributeID != "" && productAttributeID != null) {
$("#e_Attributes").dialog("open");
} });

Clicking the Edit button looks simple , Because when we click on the selected row, we have done the work --- Get the value of the selected row , And give to dialog The corresponding element in . So just turn it on dialog that will do .
     Delete operation :

 // Delete 
$("#delete").click(function () {
var productAttributeID = $("#productAttributeID").val();
var productID = $("#productID").val();
if (productAttributeID != null && productAttributeID != "") {
if (confirm("Delete?")) {
$.ajax({
type: "GET",
url: "@Url.Action("DeleteAttribute", "Product")",
data: { ProductID: productID, ProductAttributeID: productAttributeID },// The parameter name should be the same as Action The parameter names in are the same
dataType: "html",
cache: false,
success: function (result) {
$("#d_Attributes").html(result);
$("#productAttributeID").val(null);
}
});
}
}
});

Delete operations use asynchronous updates , The code of warning box pop up when deleting is if(confirm(" What needs to be displayed ")){}.

Now what we need is done .

JQuery DataTables Editor--- Page content modification && Database information modification (2) More articles about

  1. JQuery DataTables Editor--- Page content modification && Database information modification (1)

    We use jquery datatables Not just for the presentation of data , At the same time, we need to perform simple operations on the data , This operation is divided into two parts :1. Page content modification :2. Modification of corresponding database information . The previous blog post introduced page level operations , ...

  2. js Advanced 11-1 jquery Three methods of page content operation in

    jquery Three methods of page content operation in One . summary One sentence summary : Just remember three ways .text,html,val. Because here's the method , So the setting value is the parameter of the later method . 1.jquery Three methods of page content operation in ? ...

  3. Local virtual machine deployment online php Program --- No need to modify database information

    1. Particular attention : Bring it online php After the procedure is generally does not need to modify config.php Inside the database connection information , If it is modified, an error will be reported : The site is closed . therefore 2.5 The steps need to be omitted . If it's from the beginning php Source code , You need to configure the original ...

  4. jquery mobile Display the content of the page as a pop-up box

    notes : You must use the corresponding version of jquery mobile css. Otherwise, it can't be displayed normally <div data-role="page" id="pageone"> ...

  5. Use jQuery Edit delete page content , Two ways

    The first one is , Fewer editors use this , Edit directly on that piece of content , To lose focus is to finish A few days ago when I was working on the edit box , You need to modify only one state // Edit role function editTr($this){ thatTd=$($this) ...

  6. JQuery datatables Center title and content

    1. As the title , Using a powerful form plug-in datatables, To center the title and content , Only need jsp introduce css, Just write the following : /*qiulinhe:2016 year 11 month 7 Japan 13:48:26*/ /* da ...

  7. jquery.dataTables The content in the column is centered ? solve ?

    .table > tbody > tr > td {  vertical-align: middle; }

  8. ( Back end ) Be careful hibernate Objects in the set Method to modify the database

    2017-10-16 Others in the company have found a problem , Wuliangye has a problem with the inventory of gold products , I deleted the inventory and didn't return it , A bottle of more than 1000 . And in my function block , When I look at the shipping details , Something weird happened , It looks OK at first sight , It's a new year ...

  9. Ionic Application icon , Modify the information

    Ionic Application icon , Modify the information Ionic Application icon modify Prepare replacement icons and generate icons of various sizes 1. Use the command line to enter the project root , Carry out orders ionic resources Replace the picture in the resources ...

Random recommendation

  1. Android -- time axis (ListView)

    1. Realization effect

  2. sql execution time

    SET STATISTICS PROFILE ON SET STATISTICS IO ON SET STATISTICS TIME ON --GO /*-- Yours SQL Script start */SELECT * F ...

  3. HDU 3686 Traffic Real Time Query System( Biconnected component contraction point +LCA)(2010 Asia Hangzhou Regional Contest)

    Problem Description City C is really a nightmare of all drivers for its traffic jams. To solve the t ...

  4. C# Yes MongoDB Simple operation of adding, deleting, modifying and checking ( turn )

    Applied MongoDB Supported by C# drive , The current version is 1.6.0 Download address :https://github.com/mongodb/mongo-csharp-driver/downloads 1, Connect to database ...

  5. C Programming style .

    C Language programming style . About programming style , There are different norms in different books , Different companies have their own set of definitions . Make a brief explanation according to your programming habits . 1. Variable definitions When you define variables , Prefix uses the type of variable , Then use English words or abbreviations to represent the use of variables ...

  6. MySQL+SSM+Ajax Upload picture problem

    For the first time, write the code to upload the image , There are a lot of problems . I did it all day yesterday , At last, in the evening . Cheers . however , After finishing , There are still a lot of problems . So it's a note here , Forget to look back later , I'd like to ask friends from all walks of life .(^_ ...

  7. UWP Hand painted video creation tool technology sharing series - Hand drawn video export

    The final product of hand drawn video is video file , The previous articles mainly focus on the creation of hand-painted videos , Today I will talk about the export of hand drawn video . Mainly with UWP For example , In addition, we will introduce some Web The problems and solutions encountered by the client side . As mentioned above , Hand painted video after creation , ...

  8. Cross domain access - Cross-domain request The impact of the same origin policy concept on cross domain requests And several solutions to cross domain requests, such as jsonp

    Why is the same origin policy set > A resource access policy for browsers > The same-origin policy (Same origin policy) It's a convention , It's the core of the browser The heart is the best Basic safety functions , If the same origin policy is missing , Then browse ...

  9. Docker5 And Deploy your app

    Make sure you have published the friendlyhello image you created by pushing it to a registry. We’ll ...

  10. Picture link to base64

    Half of my images need to be converted to base64 character string , So we can send my image to the server . Now we offer a js: function convertImgToBase64(url, callback, outputFo ...