dhtmlxgrid

dhtmlxgrid用于显示表格,相关官方资料可参阅http://dhtmlx.com/docs/products/dhtmlxGrid/

  1. 包含的javascript文件
     <link href="../JS/Grid/codebase/dhtmlxgrid.css" rel="stylesheet" type="text/css" />
      <script src="../JS/Grid/codebase/dhtmlxgrid.js" type="text/javascript"></script>
    
  2. 初始化grid代码
    <script>
            var myGrid, myDataProcessor;
            function doOnLoad(){
                //设置网格
                myGrid = new dhtmlXGridObject('gridbox');
                myGrid.setImagePath("../../../codebase/imgs/");
                myGrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication");// 列标题
                myGrid.setInitWidths("50,150,120,80,80,80,80,*");//各列宽度数字表示像素,弹性用*表示
                myGrid.setColAlign("right,left,left,right,center,left,center,center");//
                myGrid.setColTypes("dyn,ed,txt,price,ch,coro,ch,ro");
                myGrid.setColSorting("int,str,str,int,str,str,str,date");
                myGrid.init();
        myGrid.parse(data,Json) // 加载josn格式数据
                
                myDataProcessor = new dataProcessor("php/update_all.php"); // lock feed url
                myDataProcessor.setTransactionMode("POST",true); // set mode as send-all-by-post
                myDataProcessor.setUpdateMode("off"); // disable auto-update
                myDataProcessor.init(myGrid); // link dataprocessor to the grid
            }
        </script>

     

  3.   var data = { rows: [{ id: 1, data: ["white", "客户", "zk", "020291_103", "P201509011213", "20", "0", "20", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "4", "0", ] }, { id: 2, data: ["red", "客户", "zk", "052147_104", "P201509011213", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 3, data: ["red", "客户", "zk", "098881_103", "P201509011213", "20", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 4, data: ["red", "客户", "zk", "132754_103", "P201509011213", "40", "0", "40", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 5, data: ["red", "客户", "zk", "142407_102", "P201509011213", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 6, data: ["red", "客户", "zk", "170481_101", "P201509011213", "20", "0", "50", "0", "0", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 7, data: ["red", "客户", "zk", "205314_102", "P201509011213", "50", "0", "50", "0", "0", "0", "50", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 8, data: ["red", "客户", "zk", "215487_105", "P201509011213", "20", "0", "0", "0", "20", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 9, data: ["red", "客户", "zk", "219193_101", "P201509011213", "30", "0", "0", "0", "0", "0", "30", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 10, data: ["red", "客户", "zk", "233435_109", "P201509011213", "8", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "8", "0", ] }, { id: 11, data: ["red", "客户", "zk", "272280_103", "P201509011213", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 12, data: ["red", "客户", "zk", "327734_111", "P201509011213", "100", "0", "0", "0", "100", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 13, data: ["red", "客户", "zk", "376213_119", "P201509011213", "10", "0", "0", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 14, data: ["red", "客户", "zk", "407678_102", "P201509011213", "10", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "6", "0", ] }, { id: 15, data: ["red", "客户", "zk", "448018_102", "P201509011213", "10", "0", "50", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 16, data: ["red", "客户", "zk", "458382_109", "P201509011213", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 17, data: ["red", "客户", "zk", "475244_101", "P201509011213", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 18, data: ["red", "客户", "zk", "478391_105", "P201509011213", "4", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "4", "0", ] }, { id: 19, data: ["red", "客户", "zk", "507093_102", "P201509011213", "100", "0", "60", "0", "0", "0", "100", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 20, data: ["red", "客户", "zk", "536851_106", "P201509011213", "20", "0", "0", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 21, data: ["red", "客户", "zk", "545096_107", "P201509011213", "20", "0", "0", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 22, data: ["red", "客户", "zk", "567848_101", "P201509011213", "30", "0", "30", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 23, data: ["red", "客户", "zk", "568521_102", "P201509011213", "20", "0", "80", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "70", "0", ] }, { id: 24, data: ["red", "客户", "zk", "597440_107", "P201509011213", "50", "0", "0", "0", "0", "0", "50", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 25, data: ["white", "客户", "zk", "632459_101", "P201509011213", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "5", "5", ] }, { id: 26, data: ["red", "客户", "zk", "638113_101", "P201509011213", "30", "0", "0", "0", "20", "0", "30", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 27, data: ["red", "客户", "zk", "673887_105", "P201509011213", "12", "0", "0", "0", "0", "0", "6", "0", "0", "0", "0", "0", "0", "0", "0", "0", "6", "0", ] }, { id: 28, data: ["red", "客户", "zk", "677456_102", "P201509011213", "10", "0", "0", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 29, data: ["red", "客户", "zk", "699364_101", "P201509011213", "10", "0", "0", "0", "10", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 30, data: ["red", "客户", "zk", "706630_107", "P201509011213", "50", "0", "0", "0", "100", "0", "50", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 31, data: ["red", "客户", "zk", "709237_101", "P201509011213", "20", "0", "0", "0", "0", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 32, data: ["red", "客户", "zk", "711247_109", "P201509011213", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 33, data: ["red", "客户", "zk", "729230_104", "P201509011213", "50", "0", "0", "0", "0", "0", "50", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 34, data: ["red", "客户", "zk", "751472_111", "P201509011213", "6", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "6", "0", ] }, { id: 35, data: ["red", "客户", "zk", "758475_101", "P201509011213", "20", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 36, data: ["red", "客户", "zk", "765691_117", "P201509011213", "20", "0", "0", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 37, data: ["red", "客户", "zk", "780609_101", "P201509011213", "20", "0", "0", "0", "0", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 38, data: ["red", "客户", "zk", "785683_117", "P201509011213", "50", "0", "0", "0", "100", "0", "50", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 39, data: ["red", "客户", "zk", "792654_111", "P201509011213", "8", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "8", "0", ] }, { id: 40, data: ["red", "客户", "zk", "799896_101", "P201509011213", "4", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "4", "0", ] }, { id: 41, data: ["red", "客户", "zk", "810838_101", "P201509011213", "4", "0", "0", "0", "0", "0", "4", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 42, data: ["red", "客户", "zk", "813013_101", "P201509011213", "10", "0", "0", "0", "20", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 43, data: ["red", "客户", "zk", "819627_106", "P201509011213", "6", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "6", "0", ] }, { id: 44, data: ["red", "客户", "zk", "847196_109", "P201509011213", "30", "0", "0", "0", "30", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 45, data: ["red", "客户", "zk", "851805_101", "P201509011213", "10", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 46, data: ["red", "客户", "zk", "884133_108", "P201509011213", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 47, data: ["red", "客户", "zk", "887702_107", "P201509011213", "10", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 48, data: ["red", "客户", "zk", "900902_106", "P201509011213", "10", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 49, data: ["red", "客户", "zk", "903371_104", "P201509011213", "10", "0", "0", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "2", "0", ] }, { id: 50, data: ["red", "客户", "zk", "908981_102", "P201509011213", "30", "0", "30", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 51, data: ["red", "客户", "zk", "955962_102", "P201509011213", "100", "0", "0", "0", "0", "0", "100", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 52, data: ["red", "客户", "zk", "974304_106", "P201509011213", "10", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 53, data: ["red", "客户", "zk", "990997_105", "P201509011213", "2", "0", "0", "0", "0", "0", "2", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ]}]
    实例

     

  var data = { rows: [{ id: 1, data: ["white", "客户", "zk", "020291_103", "P201509011213", "20", "0", "20", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "4", "0", ] }, { id: 2, data: ["red", "客户", "zk", "052147_104", "P201509011213", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 3, data: ["red", "客户", "zk", "098881_103", "P201509011213", "20", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 4, data: ["red", "客户", "zk", "132754_103", "P201509011213", "40", "0", "40", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 5, data: ["red", "客户", "zk", "142407_102", "P201509011213", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 6, data: ["red", "客户", "zk", "170481_101", "P201509011213", "20", "0", "50", "0", "0", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 7, data: ["red", "客户", "zk", "205314_102", "P201509011213", "50", "0", "50", "0", "0", "0", "50", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 8, data: ["red", "客户", "zk", "215487_105", "P201509011213", "20", "0", "0", "0", "20", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 9, data: ["red", "客户", "zk", "219193_101", "P201509011213", "30", "0", "0", "0", "0", "0", "30", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 10, data: ["red", "客户", "zk", "233435_109", "P201509011213", "8", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "8", "0", ] }, { id: 11, data: ["red", "客户", "zk", "272280_103", "P201509011213", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 12, data: ["red", "客户", "zk", "327734_111", "P201509011213", "100", "0", "0", "0", "100", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 13, data: ["red", "客户", "zk", "376213_119", "P201509011213", "10", "0", "0", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 14, data: ["red", "客户", "zk", "407678_102", "P201509011213", "10", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "6", "0", ] }, { id: 15, data: ["red", "客户", "zk", "448018_102", "P201509011213", "10", "0", "50", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 16, data: ["red", "客户", "zk", "458382_109", "P201509011213", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 17, data: ["red", "客户", "zk", "475244_101", "P201509011213", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 18, data: ["red", "客户", "zk", "478391_105", "P201509011213", "4", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "4", "0", ] }, { id: 19, data: ["red", "客户", "zk", "507093_102", "P201509011213", "100", "0", "60", "0", "0", "0", "100", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 20, data: ["red", "客户", "zk", "536851_106", "P201509011213", "20", "0", "0", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 21, data: ["red", "客户", "zk", "545096_107", "P201509011213", "20", "0", "0", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 22, data: ["red", "客户", "zk", "567848_101", "P201509011213", "30", "0", "30", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 23, data: ["red", "客户", "zk", "568521_102", "P201509011213", "20", "0", "80", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "70", "0", ] }, { id: 24, data: ["red", "客户", "zk", "597440_107", "P201509011213", "50", "0", "0", "0", "0", "0", "50", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 25, data: ["white", "客户", "zk", "632459_101", "P201509011213", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "5", "5", ] }, { id: 26, data: ["red", "客户", "zk", "638113_101", "P201509011213", "30", "0", "0", "0", "20", "0", "30", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 27, data: ["red", "客户", "zk", "673887_105", "P201509011213", "12", "0", "0", "0", "0", "0", "6", "0", "0", "0", "0", "0", "0", "0", "0", "0", "6", "0", ] }, { id: 28, data: ["red", "客户", "zk", "677456_102", "P201509011213", "10", "0", "0", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 29, data: ["red", "客户", "zk", "699364_101", "P201509011213", "10", "0", "0", "0", "10", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 30, data: ["red", "客户", "zk", "706630_107", "P201509011213", "50", "0", "0", "0", "100", "0", "50", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 31, data: ["red", "客户", "zk", "709237_101", "P201509011213", "20", "0", "0", "0", "0", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 32, data: ["red", "客户", "zk", "711247_109", "P201509011213", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 33, data: ["red", "客户", "zk", "729230_104", "P201509011213", "50", "0", "0", "0", "0", "0", "50", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 34, data: ["red", "客户", "zk", "751472_111", "P201509011213", "6", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "6", "0", ] }, { id: 35, data: ["red", "客户", "zk", "758475_101", "P201509011213", "20", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 36, data: ["red", "客户", "zk", "765691_117", "P201509011213", "20", "0", "0", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 37, data: ["red", "客户", "zk", "780609_101", "P201509011213", "20", "0", "0", "0", "0", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 38, data: ["red", "客户", "zk", "785683_117", "P201509011213", "50", "0", "0", "0", "100", "0", "50", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 39, data: ["red", "客户", "zk", "792654_111", "P201509011213", "8", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "8", "0", ] }, { id: 40, data: ["red", "客户", "zk", "799896_101", "P201509011213", "4", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "4", "0", ] }, { id: 41, data: ["red", "客户", "zk", "810838_101", "P201509011213", "4", "0", "0", "0", "0", "0", "4", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 42, data: ["red", "客户", "zk", "813013_101", "P201509011213", "10", "0", "0", "0", "20", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 43, data: ["red", "客户", "zk", "819627_106", "P201509011213", "6", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "6", "0", ] }, { id: 44, data: ["red", "客户", "zk", "847196_109", "P201509011213", "30", "0", "0", "0", "30", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 45, data: ["red", "客户", "zk", "851805_101", "P201509011213", "10", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 46, data: ["red", "客户", "zk", "884133_108", "P201509011213", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "0", ] }, { id: 47, data: ["red", "客户", "zk", "887702_107", "P201509011213", "10", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 48, data: ["red", "客户", "zk", "900902_106", "P201509011213", "10", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 49, data: ["red", "客户", "zk", "903371_104", "P201509011213", "10", "0", "0", "0", "0", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "2", "0", ] }, { id: 50, data: ["red", "客户", "zk", "908981_102", "P201509011213", "30", "0", "30", "0", "20", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 51, data: ["red", "客户", "zk", "955962_102", "P201509011213", "100", "0", "0", "0", "0", "0", "100", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 52, data: ["red", "客户", "zk", "974304_106", "P201509011213", "10", "0", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ] }, { id: 53, data: ["red", "客户", "zk", "990997_105", "P201509011213", "2", "0", "0", "0", "0", "0", "2", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", ]}] }; ;
 
json 数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>查询反馈分配 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=IE8" />
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <link href="../Styles/dict.css" rel="stylesheet" type="text/css" />
    <link href="../JS/Grid/codebase/dhtmlxgrid.css" rel="stylesheet" type="text/css" />
    <script src="../JS/Grid/codebase/dhtmlxgrid.js" type="text/javascript"></script>
    <script>


        var data = "";//Json格式数据
        var myGrid; myDataProcessor;
        function doOnLoad() {
            myGrid = new dhtmlXGridObject('gridbox');
            myGrid.setImagePath("../JS/Grid/codebase/imgs/");
            myGrid.setColumnIds("颜色,mark,placeorder,CAD,批次,反馈数,库存数,zkwh1num,zkwh1allotNum,zkwh2num,zkwh2allotNum,zknc1num,zknc1allotNum,zknn1num,zknn1allotNum,zknn2num,zknn2allotNum,zkcs1num,zkcs1allotNum,zkfz1num,zkfz1allotNum,zkfq1num,zkfq1allotNum");
            myGrid.setHeader("颜色,bieti,placeorder,CAD,批次,查 &nbsp;&nbsp;货反馈数,米其林库存数,zkwh1,#cspan,zkwh2,#cspan,zknc1,#cspan,zknn1,#cspan,zknn2,#cspan,zkcs1,#cspan,zkfz1,#cspan,zkfq1,#cspan");
            myGrid.attachHeader(["#rspan", "#rspan", "#rspan", "#rspan", "#rspan", "#rspan", "#rspan", "查询数", "分配数", "查询数", "分配数", "查询数", "分配数", "查询数", "分配数", "查询数", "分配数", "查询数", "分配数", "查询数", "分配数", "查询数", "分配数"]);
            myGrid.setInitWidths("10,10,10,85,98,50,50,*");
            // myGrid.setInitWidths("*");
            myGrid.setColAlign("center,center,center,center,center,left,left,left,left,left,left");

            myGrid.getCombo(5).put(2, 2);
            myGrid.setColTypes("ed,ed,ro,ro,ro,ro,ro,ro,ed,ro,ed,ro,ed,ro,ed,ro,ed,ro,ed,ro,ed,ro,ed");
            myGrid.enableEditEvents(false, true, true);
            myGrid.attachEvent("onEditCell", doOnCellEdit);
            myGrid.setColSorting("str,str,str,str,str,str,str,str,strstr,strstr,strstr,strstr,strstr,strstr,strstr,st");
            myGrid.setColumnMinWidth(50, 0);
            myGrid.setStyle("background:#15A0F5; font-weight:bold;", "", "color:red;", "");

            myGrid.init();
            myGrid.setColumnHidden(0, true); //颜色标记
            myGrid.setColumnHidden(1, true); //用来记录操作的那个客户
            myGrid.setColumnHidden(2, true); // 用来记录下单人
            //myGrid.enableMultiselect(true);
            myGrid.parse(data, function () {

                for (var i = 1; i <= myGrid.getRowsNum(); i++) {
                    var colour = myGrid.cells(i, 0).getValue();

                    if (colour == "red") {
                        myGrid.setRowColor(i, "#FFD2D2");
                    }
                    else {
                        myGrid.setRowColor(i, "#E0EDF5");
                    }
                }

            }, "json");
            // -------------------------------  



            myDataProcessor = new dataProcessor("../Handler/UpdataRow.ashx"); // lock feed url
            myDataProcessor.enableDataNames(true);
            myDataProcessor.setTransactionMode("POST", false);
            // myDataProcessor.setUpdateMode("off"); 
            myDataProcessor.init(myGrid); // link dataprocessor to the grid

            //回掉函数
            myDataProcessor.defineAction("error", function (tag) {
                alert(tag.firstChild.nodeValue);
                var rowid = tag.getAttribute("sid");
                var val = document.getElementById("hiddenid").value;
                var hiddencol = document.getElementById("hiddencol").value;
                myGrid.cells(rowid, hiddencol).setValue(val)
                return true;

            });
            myDataProcessor.defineAction("update", function (tag) {
                //alert(tag.firstChild.nodeValue);
                var rowid = tag.getAttribute("sid");
                var colour = tag.firstChild.nodeValue;

                myGrid.setRowColor(rowid, colour);
                alert("修改成功!");
                //                var  colour=tag.firstChild.nodeValue;
                //                var rowid=tag.getAttribute("ids");
                //                var colour = myGrid.cells(rowid, 0).getValue();
                //                   alert(colour);
                //                    if (colour =="red") {
                //                        myGrid.setRowColor(rowid, "red");
                //                    }
                //               
                return true;
            });



        }


        function doOnCellEdit(stage, row, cell, newValue, oldValue) {


            if (stage == 1) {
                var old = myGrid.cells(row, cell).getValue();
                var ss = myGrid.getColumnLabel(cell - 1) + ',';
                var name = ss + old;
                myGrid.cells(row, 1).setValue(name)
                document.getElementById("hiddencol").value = cell;
            }
            if (stage == 2) {
                if (newValue != oldValue) {
                    //                  myDataProcessor.setUpdated(row,true);
                    //            document.getElementById("some_name").onclick();  
                    document.getElementById("hiddenid").value = oldValue;


                    myDataProcessor.sendData();

                }
                else {
                    grid1.cells(row, cell).setValue(oldValue);
                }
            }
            return true;

        }

    </script>
</head>
<body onload="doOnLoad()">
    <form method="post" action="Orderallocation.aspx?id=2&amp;batch=P201509011213&amp;ordersUser=zk"
    id="form1">
    <div class="aspNetHidden">
        <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE4NTIwMTY3NTFkZBj+WHdezDNnSJmTkyMb74oGN4Kyl/rg+Q6fZjg0yCvG" />
    </div>
    <div class="aspNetHidden">
        <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="1F02C65F" />
        <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAKp5pdJnDpZJbSYIceC5PQl2VDEqY/n3zm5Sec4UTc3dF8oJ5CPllqhls6CYOd6yR7EA8eIzizGz6yUOHX1m7Pv" />
    </div>
    <div class="subnav">
        分配管理
    </div>
    <div id="right">
        <div class="page ">
            <p class="left">
                <p class="right">
                    <a style="color: Red;" href="../Order/batchmanagement.aspx">返回</a> &nbsp;</p>
                <div class="clear">
                </div>
                <div class="page ">
                </div>
        </div>
        <div id="gridbox" style="width: 100%; height: 500px; background-color: white;">
        </div>
        <div class="Pages">
            <div class="center">
                <input type="submit" name="btnQuerey" value="全部提交" id="btnQuerey" />
                &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
            </div>
        </div>
    </div>
    <input type="hidden" id="hiddenid" value="" />
    <input type="hidden" id="hiddencol" value="" />
    </form>
</body>
</html>
实例

 

      

 

 

 

posted @ 2015-09-08 10:15  疯癫石头  阅读(655)  评论(0)    收藏  举报