API tools faq
paste
Advertisement
suleman1

My HTML and JS

suleman1
Jan 16th, 2014
62
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.85 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title></title>
  5.     <link rel="stylesheet" href="styles/jqxGridCustomTheme.css" type="text/css"/>
  6.     <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
  7.     <script type="text/javascript" src="scripts/jquery-2.0.3.min.js"></script>
  8.     <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
  9.     <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
  10.     <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
  11.     <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
  12.     <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
  13.     <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
  14.     <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
  15.     <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
  16.     <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
  17.     <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
  18.     <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
  19.     <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
  20.     <script type="text/javascript" src="jqwidgets/jqxgrid.edit.js"></script>
  21.     <script type="text/javascript" src="scripts/gettheme.js"></script>
  22.     <script type="text/javascript">
  23.         $(document).ready(function () {
  24.           //  var url = "/A1.txt";
  25.             var url = "http://pastebin.com/raw.php?i=xvJzEt8G";
  26.  
  27.             // prepare the data
  28.             var source =
  29.             {
  30.                 datatype: "json",
  31.                 url: url,
  32.                 root: "Rotation>Shifts"
  33.             };
  34.  
  35.             var dataAdapter = new $.jqx.dataAdapter(source, {
  36.  
  37.                 // Called this function to do some changes in the original data I was getting from server
  38.  
  39.                 beforeLoadComplete: function (records, original) {
  40.  
  41.                     //initial columns array
  42.  
  43.                     var columnsData = [
  44.                         { text: 'Icon',     datafield: 'Icon',          width: 250 },
  45.                         { text: 'Name',     datafield: 'Name',          width: 150 },
  46.                         { text: 'Start',    datafield: 'BeginOffset',   width: 180 },
  47.                         { text: 'End',      datafield: 'EndOffset',     width: 120 },
  48.                         { text: 'Hours',    datafield: 'ConfigIndex',   width: 120 },
  49.                         { text: 'Paid',     datafield: 'PaidHours',     width: 120 },
  50.                         { text: 'Period',   datafield: 'Period',        width: 120 }
  51.                     ];
  52.  
  53.                     /**
  54.                      *  Function to map my baseline array which was a array of numbers like this        [0,0,0,0,0,0,0,0,0,0] to seperate objects so I can put each array index to a separate cell
  55.                      *  It will return the same records object with added fields of all the baseline indexes.
  56.                      */
  57.  
  58.  
  59.                     var test= mapBaseline(records, columnsData);
  60.  
  61.                     /**
  62.                      * Not so general but still works for me, as almost all of the time Baseline length is same for all objects
  63.                      * Creating columns so that Baseline could be mapped.
  64.                      */
  65.  
  66.                     for (var k=0; k < test[0].Baseline.length; k++)
  67.                    {
  68.                        columnsData.push({text:k, datafield: 'Baseline'+k, width: 20});
  69.                    }
  70.  
  71.                    // initialize jqxGrid columns
  72.                    $('#jqxgrid').jqxGrid({
  73.                        columns: columnsData
  74.                    });
  75.                }
  76.            });
  77.  
  78.            var jqxgridColumns = $('#jqxgrid').jqxGrid({
  79.                width: 1200,
  80.                source: dataAdapter,
  81.                editable: true,
  82.                sortable: true,
  83.                autoheight: true,
  84.                sortable: true,
  85.                altrows: true,
  86.                theme: 'EnergyBlue',
  87.                enabletooltips: true,
  88.                selectionmode: 'multiplecellsadvanced'
  89.            });
  90.  
  91.        });
  92.  
  93.        function mapBaseline(arr, columns) {
  94.            for (var i in arr)
  95.            {
  96.                console.log(arr[i].Baseline);
  97.                for (var k=0; k < arr[i].Baseline.length; k++)
  98.                {
  99.                    console.log(arr[i].Baseline[k]);
  100.                    arr[i]["Baseline"+k] = arr[i].Baseline[k];
  101.                }
  102.            }
  103.            return arr;
  104.  
  105.        }
  106.    </script>
  107.  
  108.     <meta content="">
  109.     <style></style>
  110. </head>
  111. <body class="default">
  112. <h1>Test Grid  using Jqxgrid by Mirza </h1>
  113. <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
  114.     <div id="jqxgrid">
  115.     </div>
  116. </div>
  117.  
  118.  
  119. </body>
  120. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!