이 기사는 부트 스트랩을 결합하여 제품 추가, 삭제 및 수정을 포함하여 제품 목록을 관리하기위한 비교적 완전한 응용 프로그램을 만듭니다.
필요한 따옴표
<script type = 'text/javaScript'src = 'http : //www.see-source.com/js/knockout-2.js'> </script> <script type = 'text/javascript'src = 'http : //www.see-source.com/jquery-1.6.2.min.js'> href = "http://www.see-source.com/bootstrap/css/bootstrap.css"rel = "Stylesheet">
HTML 코드
<body> <!-제품 목록을 동적으로 생성-> <table> <table> <tr> <th> id> id> id> id> 제품 이름 </th> <th> 원래 가격 </th> <th> 홍보 가격 </th> <th> 운영 </th> </tr> </thead> <tbody : <tr> <td> <td> <td> </td> <td> <입력 유형 = "text"data-bind = "value : $ data.name"/> </td> <td> input type = "text"data-bind = "value : $ data.price"/> </td> <td> <입력 유형 = "text"data-bind = "value : <$ data.actualcost"/> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> value = "modify"data-bind = "click : $ root.update"/> <input type = "button"value = "delete"data-bind = "click : $ root.remove"/> </td> </tbody> </table> <!-제품 추가 양식-> <형식 데이터-bind = "제출 : $ root.create"> 라벨> </legend> </legend> for = "input01"> 제품 이름 </label> <div> <입력 유형 = "text"name = "name"> </div> </div> <div> <label for = "input01"> 원래 가격 </label> <div> <입력 유형 = "text"= "price"> </div> </div> <div> <input01 "> prom </lade> <"> input01 "> 이름 = "실제 코스트"> </div> </div> <div> <버튼 타입 = "제출"> 저장 </button> <버튼> 취소 </button> </div> </fieldset> </form> </body>
JS 코드
<script type = "text/javaScript"> function productsViewModel () {var baseuri = 'http : // localhost : 8080/knockout/'; var self = 이것; //self.products = ko.observablearray ([{ 'id': '111', 'name': 'lenovo k900', 'price': '3299', '실제 코스트': '3000'}, { 'id': '222', 'name': 'htc one', ''4850 '); self.products = ko.observablearray (); $ .getJson (BaseUri + "List", Self.Products); // 제품 목록을로드 // 제품 추가 self.create = function (formelement) {$ .post (baseuri + "add", $ (formelement) .serialize (), function (data) {if (data.success) {// varn arewrontly arecort가 성공할 때, ui는 SYNCRONTINE SYNCHRONET (syncronly)입니다. {}; newProduct.name.name.value = formelement.value; } // 제품 self.update = function (product) {$ .post (baseuri + "update", 곱, 함수 (data) {if (data.success) {alert ( "성공적으로"), "json"); } // 제품 self.remove = function (product) {$ .post (baseuri + "delete", "productId =" + product.id, function (data) {if (data.success) {// 서버 측 삭제가 성공할 때, self.products.rove (product);}}, "json"; }}}} ko.applyBindings (New ProductsViewModel ()); </script>여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.