Selectable rows in SharePoint using jQuery UI

Here is a quick tip. If you’d like to make rows in document libraries selectable, jQuery UI Selectable is the perfect fit for this.

*Select multiple rows

* Urls of selected documents will be shown.

All you have to do is refer to jQuery UI js, and select your DOM elements to make them selectable and apply your logic.

In this demo, i’ll simply display urls for selected documents. Go ahead and add a CEWP in your document library page. Then select listviewtable as follows. Your function should look like this:

<script>
$(function() {

//make listviewtable selectable
    $(“.ms-listviewtable“).selectable({

      filter: “tr“,  

      stop: function() {
         // display urls of selected documents
         var result = $( “#select-result” ).empty();
         $( “.ui-selected”, this ).each(function() {

             var index = $( ‘a’, this ).attr( ‘href’ );
             result.append( “<br/>” + ( index ) );

         }); // end – each

      } //end – stop

    }); // end – selectable

}

</script>

<span id=”select-result”></span>

So, above code is making all rows in listview table selectable and once you select one or multiple rows, urls are displayed. That part is done in stop function of selectable above.

Now, you selected multiple rows and you have IDs, URLs, …etc. for them, you can simply use that information as an input to your own logic.

zieglers