Home>

Do not want to use easyui style, but want his table function,Originally, I wanted to find related plug-ins on the Internet.But I started writing it myself,I didn't expect it to be that simple.

Background code:(this is not important)

public actionresult getdicttypes ()
{
  var data=from a in dbo.dicttypes
        select new dicttypelistviewmodel
        {
          id=a.id,          name=a.name,          lastchangeuser=a.lastchangeuser,          lastchangedate=a.lastchangedate,          remark=a.remark
        };
  return json (data.tolist ());
}
</pre>
</div>
<p>
Page code:
</p>
<div>
<pre>
<table>
 <thead>
  <tr>
   <th>id</th>
   <th>Title</th>
   <th>Introduction</th>
  </tr>
 </thead>
 <tbody></tbody>
</table>
</pre>
</div>
<p>
JavaScript code:(need to be called in $(document) .ready (function ($) {})
</p>
<div>
<pre>
function showdicttype () {
  $("#dicttypetable"). children ("tbody"). empty ();
  $.ajax ({
    url:getdicttypes_url,    type:"post",    datatype:"json"
  })
   .done (function (data) {
     var tbody="";
     $.each (data, function (index, el) {
       var tr="<tr>";
       tr +="<td>" + el.id + "</td>";
       tr +="<td>" + el.name + "</td>";
       tr +="<td>" + el.remark + "</td>";
       tr +="</tr>";
       tbody +=tr;
     });
     $("#dicttypetable"). children ("tbody"). append (tbody);
     binddicttypetableevent ();//Here is the binding event
   })
   .fail (function () {
     alert ("err");
   });
}
</pre>
</div>
<p>
To bind events after the table is generated:
</p>
<div>
<pre>
function binddicttypetableevent () {
  $("#dicttypetable tbody.sel"). children ("tr"). click (function (event) {
    $(this) .siblings ("tr"). removeclass ("active");//Remove the selected effect of other lines
    $(this) .addclass ("active");//Increase the selected effect
    var id=$(this) .children ("td:eq (0)"). text ();//Get the id
    showdictdata (id);//Operation code,Here is showing another table data
  });
}
</pre>
</div>
<p>
Finally here is the code to get the selected entry id:
</p>
<div>
<pre>
function gettypetableselectid () {
  return $("#dicttypetable tbody.sel tr.active td:eq (0)"). text ();
}
  • Previous Code to open sidebar menu effects based on jQuery tilt
  • Next Takeown to get file or folder ownership