<span style=
"color: #008080"
> 1</span> <script type=
"text/javascript"
>
<span style=
"color: #008080"
> 2</span> $(document).ready(<span style=
"color: #0000ff"
>
function
</span><span style=
"color: #000000"
> () {
</span><span style=
"color: #008080"
> 3</span> $(
"#jqGrid"
<span style=
"color: #000000"
>).jqGrid({
</span><span style=
"color: #008080"
> 4</span> url:
'data.json'
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
> 5</span> <span style=
"color: #008000"
>
<span style=
"color: #008080"
> 6</span> editurl:
'clientArray'
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
> 7</span> datatype:
"json"
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
> 8</span> <span style=
"color: #000000"
> colModel: [
</span><span style=
"color: #008080"
> 9</span> <span style=
"color: #000000"
> {
</span><span style=
"color: #008080"
>10</span> label:
'Customer ID'
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>11</span> name:
'CustomerID'
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>12</span> width: 90<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>13</span> key: <span style=
"color: #0000ff"
>true</span><span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>14</span> editable: <span style=
"color: #0000ff"
>true</span><span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>15</span> editrules : { required: <span style=
"color: #0000ff"
>true</span><span style=
"color: #000000"
>}
</span><span style=
"color: #008080"
>16</span> <span style=
"color: #000000"
> },
</span><span style=
"color: #008080"
>17</span> <span style=
"color: #000000"
> {
</span><span style=
"color: #008080"
>18</span> label:
'Company Name'
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>19</span> name:
'CompanyName'
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>20</span> width: 160<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>21</span> editable: <span style=
"color: #0000ff"
>true</span> <span style=
"color: #008000"
>
<span style=
"color: #008080"
>22</span> <span style=
"color: #000000"
> },
</span><span style=
"color: #008080"
>23</span> <span style=
"color: #000000"
> {
</span><span style=
"color: #008080"
>24</span> label :
'Phone'
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>25</span> name:
'Phone'
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>26</span> width: 140<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>27</span> editable: <span style=
"color: #0000ff"
>true</span>
<span style=
"color: #008080"
>28</span> <span style=
"color: #000000"
> },
</span><span style=
"color: #008080"
>29</span> <span style=
"color: #000000"
> {
</span><span style=
"color: #008080"
>30</span> label:
'Postal Code'
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>31</span> name:
'PostalCode'
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>32</span> width: 100<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>33</span> editable: <span style=
"color: #0000ff"
>true</span>
<span style=
"color: #008080"
>34</span> <span style=
"color: #000000"
> },
</span><span style=
"color: #008080"
>35</span> <span style=
"color: #000000"
> {
</span><span style=
"color: #008080"
>36</span> label:
'City'
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>37</span> name:
'City'
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>38</span> width: 140<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>39</span> editable: <span style=
"color: #0000ff"
>true</span>
<span style=
"color: #008080"
>40</span> <span style=
"color: #000000"
> }
</span><span style=
"color: #008080"
>41</span> <span style=
"color: #000000"
> ],
</span><span style=
"color: #008080"
>42</span> sortname:
'CustomerID'
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>43</span> sortorder :
'asc'
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>44</span> loadonce: <span style=
"color: #0000ff"
>true</span><span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>45</span> viewrecords: <span style=
"color: #0000ff"
>true</span><span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>46</span> height:
"auto"
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>47</span> weight:
"auto"
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>48</span> rowNum: 10<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>49</span> pager:
"#jqGridPager"
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>50</span>
<span style=
"color: #008080"
>51</span> <span style=
"color: #000000"
> });
</span><span style=
"color: #008080"
>52</span> <!--此行代码用来解决有两个横向滚动条的问题 -->
<span style=
"color: #008080"
>53</span> $(
"#jqGrid"
).closest(
".ui-jqgrid-bdiv"
).css({
"overflow-x"
:
"hidden"
<span style=
"color: #000000"
> });
</span><span style=
"color: #008080"
>54</span>
<span style=
"color: #008080"
>55</span> $(
'#jqGrid'
).navGrid(
'#jqGridPager'
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>56</span> <span style=
"color: #008000"
>
<span style=
"color: #008080"
>57</span> { edit: <span style=
"color: #0000ff"
>true</span>, add: <span style=
"color: #0000ff"
>true</span>, del: <span style=
"color: #0000ff"
>true</span>, search: <span style=
"color: #0000ff"
>false</span>, refresh: <span style=
"color: #0000ff"
>false</span>, view: <span style=
"color: #0000ff"
>false</span><span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>58</span> position:
"left"
, cloneToTop: <span style=
"color: #0000ff"
>false</span><span style=
"color: #000000"
> },
</span><span style=
"color: #008080"
>59</span> <span style=
"color: #008000"
>
<span style=
"color: #008080"
>60</span> <span style=
"color: #000000"
> {
</span><span style=
"color: #008080"
>61</span> editCaption:
"The Edit Dialog"
<span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>62</span> recreateForm: <span style=
"color: #0000ff"
>true</span><span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>63</span> checkOnUpdate : <span style=
"color: #0000ff"
>true</span><span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>64</span> checkOnSubmit : <span style=
"color: #0000ff"
>true</span><span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>65</span> closeAfterEdit: <span style=
"color: #0000ff"
>true</span><span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>66</span> errorTextFormat: <span style=
"color: #0000ff"
>
function
</span><span style=
"color: #000000"
> (data) {
</span><span style=
"color: #008080"
>67</span> <span style=
"color: #0000ff"
>
return
</span>
'Error: '
+<span style=
"color: #000000"
> data.responseText
</span><span style=
"color: #008080"
>68</span> <span style=
"color: #000000"
> }
</span><span style=
"color: #008080"
>69</span> <span style=
"color: #000000"
> },
</span><span style=
"color: #008080"
>70</span> <span style=
"color: #008000"
>
<span style=
"color: #008080"
>71</span> <span style=
"color: #000000"
> {
</span><span style=
"color: #008080"
>72</span> closeAfterAdd: <span style=
"color: #0000ff"
>true</span><span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>73</span> recreateForm: <span style=
"color: #0000ff"
>true</span><span style=
"color: #000000"
>,
</span><span style=
"color: #008080"
>74</span> errorTextFormat: <span style=
"color: #0000ff"
>
function
</span><span style=
"color: #000000"
> (data) {
</span><span style=
"color: #008080"
>75</span> <span style=
"color: #0000ff"
>
return
</span>
'Error: '
+<span style=
"color: #000000"
> data.responseText
</span><span style=
"color: #008080"
>76</span> <span style=
"color: #000000"
> }
</span><span style=
"color: #008080"
>77</span> <span style=
"color: #000000"
> },
</span><span style=
"color: #008080"
>78</span> <span style=
"color: #008000"
>
<span style=
"color: #008080"
>79</span> <span style=
"color: #000000"
> {
</span><span style=
"color: #008080"
>80</span> errorTextFormat: <span style=
"color: #0000ff"
>
function
</span><span style=
"color: #000000"
> (data) {
</span><span style=
"color: #008080"
>81</span> <span style=
"color: #0000ff"
>
return
</span>
'Error: '
+<span style=
"color: #000000"
> data.responseText
</span><span style=
"color: #008080"
>82</span> <span style=
"color: #000000"
> }
</span><span style=
"color: #008080"
>83</span> <span style=
"color: #000000"
> });
</span><span style=
"color: #008080"
>84</span> <span style=
"color: #000000"
> });
</span><span style=
"color: #008080"
>85</span> </script>